0
<!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 не передает данные?

5
  • какой статус код возвращает запрос? (можно глянуть в консоли) 4 мар 2017 в 22:54
  • Почему у вас submitForm() объявлена два раза??
    – Crantisz
    4 мар 2017 в 22:54
  • какой статус код возвращает запрос? (можно глянуть в консоли) - Uncaught SyntaxError: Unexpected token +
    – yunga.php
    4 мар 2017 в 23:13
  • Убрал дублирующийся JS скрипт, данные передались, но только методом GET, а не пост, в чем причина?
    – yunga.php
    4 мар 2017 в 23:21
  • "Убрал дублирующийся JS скрипт" - какой из двух? приведите вопрос в соответствие с текущим состоянием Вашего кода.
    – user176262
    4 мар 2017 в 23:34

1 ответ 1

0

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

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
 },
5
  • $.ajax({ type: "POST", url: "index.php", data: { 'name' : name, 'message' : message }, success: function (text) { if (text == "success") { formSuccess(); }; } }); }, все равно запрос GET и передает только 'name'?
    – yunga.php
    5 мар 2017 в 8:55
  • Смотрите в консоли, в dev tools вашего браузера. Должны быть ошибки.
    – Kirill
    5 мар 2017 в 9:11
  • Ошибок нет, браузер Google chrome
    – yunga.php
    5 мар 2017 в 10:10
  • добавьте в ajax после success(после запятой) -- error: function(xhr, ajaxOptions, thrownError) { console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } -- эта конструкция словит в консольку ошибки возвращаемые от обработчика.
    – Kirill
    5 мар 2017 в 10:14
  • Добавил, ошибок нет
    – yunga.php
    5 мар 2017 в 12:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.