Отправка данных формы AJAX

335
06 марта 2017, 12:07
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="desription" content="Создать гостевую книгу, где любой человек может оставить комментарий в текстовом поле и добавить его. Все добавленные комментарии выводятся над текстовым полем.">
    <title>Guest book</title>
    <!--Styleshhets-->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!--    global style-->
    <style>
        body {
            background-image: url(image/background.jpg);
        }
        a {
            text-decoration: none !important;
        }
        .comments {
            /*          margin-top: 10px;*/
        }
    </style>
</head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
    $("#messageForm").submit(function (event) {
        event.preventDefault();
        submitForm();
    });
    function submitForm() {
        // Переменные с данными из формы
        var name = $("#name").val();
        var message = $("#message").val();
        alert("name=" + name + "&message=" + message);
        $.ajax({
            type: "POST",
            url: "index.php",
            data: { 
    'name' :  name, 
    'message' : message
 },
            success: function (text) {
                if (text == "success") {
                    formSuccess();
                };
            }
        });
    }
    function formSuccess() {
        $("#msgSubmit").removeClass("hidden");
    }
</script>
<body>
    <div class="container">
        <!--Header-->
        <header>
            <h1 class="text-center"><a href="index.php">Guest book</a></h1>
            <p class="lead text-center">This guest book with reviews of visitors</p>
        </header>
        <!--section form for add message-->
        <section class="well">
            <form role="form" id="messageForm">
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-3">
                        <h3>Add your comment here!</h3>
                        <div class="row">
                            <div class="form-group col-sm-6">
                                <label for="name" class="h4">Name</label>
                                <input type="text" class="form-control" name="name" id="name" placeholder="Enter name" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="message" class="h4 ">Message</label>
                            <textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
                        </div>
                        <button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
                        <div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
                    </div>
                </div>
            </form>
        </section>
        <section class="comments">
            <div class="well">
                <h3 class="text-center">Order now!</h3>
                <p class="text-center">Recive a great bonus.</p>
            </div>
        </section>
    </div>
    <!--JavaScript-->
</body>
</html>

<?php
echo 'success';
echo $_POST['name'];
echo $_POST['message'];

Не пойму почему AJAX не передает данные?

Answer 1

Следите за кодом, у вас нарушена конкатенация строк и синтаксис:

data: "name=1"+name, "&message="+message       // bad condition syntax
data: "name=1" + name + "&message=" + message, // condition syntax

Вы формируете строку ajax get-запроса, тогда как передаёте post. Для этого типа запроса существуют свои правила формирования массива данных.

data: { 
    'name' : '1' + name, 
    'message' : message
 },
READ ALSO
Постоянная проверка if
javascript

Постоянная проверка if

Есть код

 1020
Глобальная перемена JavaScript
javascript

Глобальная перемена JavaScript

вот вызов функции

 329
build frontend проекта с jquery bootstrap на grunt gulp
jQuery

build frontend проекта с jquery bootstrap на grunt gulp

возможно ли сделать так что все собственно написанные исходники и исходники из папки npm_modules строились(компилировались) в папку с публичной...

 266
Добавление элементов в select
jQuery

Добавление элементов в select

ЗдравствуйтеПытаюсь сделать чтобы при изменении выбора в одном select в другой select добавлялся элемент:

 337