Ajax публикует в PHP

Question

Я тестирую jQuery ajax post метод на локальном сервере Apache 2.2 с PHP 5.3 (совершенно новый в этом вопросе).Вот файлы, которые находятся в одной папке.

html body (библиотека jQuery включена в заголовок):

<form id="postForm" method="post">
    <label for="name">Input Name</label>
    <input type="text" name="name" id="name" /><br />
    <label for="age">Input Age</label>
    <input type="text" name="age" id="age" /><br />
    <input type="submit" value="Submit" id="submitBtn" />
</form>
<div id="resultDisplay"></div>
<script src="queryRequest.js"></script>

queryRequest.js

$(document).ready(function(){
    $('#s').focus();
    $('#postForm').submit(function(){
        var name = $('#name').val();
        var age = $('#age').val();
        var URL = "post.php";

        $.ajax({
                    type:'POST',
                    url: URL,
                    datatype:'json',
                    data:{'name': name ,'age': age},
                    success: function(data){
                        $('#resultDisplay').append("Value returned.<br />name: "+data.name+"  age: "+data.age);
                    },
                    error: function() {
                        $('resultDisplay').append("ERROR!")
                    }
                });
    });
});

post.php

<?php
$name = $_POST['name'];
$age = $_POST['age'];
$return = array('name' => $name, 'age' => $age);
echo json_encode($return);
?>

После ввода двух полей и нажатия кнопки «Отправить» вызывается метод успеха с добавлением текста, но значения, возвращаемые из сообщения ajax, не определены.

И затем после менееЧерез секунду текстовые поля очищаются, а текст, добавленный в div, исчезает.Не похоже, что это обновление страницы, так как нет пустой страницы.

Что здесь происходит?Я уверен, что это глупая ошибка, но Firebug ничего не говорит мне.

ОБНОВЛЕНИЕ:

после проверки Firebug Net, он показывает, что статус возврата POST равен 200, но он возвращает 3 раз ожидаемого объекта JSON:

{"name":"asd","age":"123"}{"name":"asd","age":"123"}{"name":"asd","age":"123"}

Answer 1

изменив строку 3 вашего queryRequest.js на

            $('#postForm').submit(function(event){
            event.preventDefault();

должен сделать эту работу за вас. Просто не позволяйте форме перезагрузить страницу.

Edit:

Просто скопировал весь ваш код в мою локальную среду и добавил event.preventDefailt(). Перезагрузка была отменена и ответ сервера был хорош (не в 3 раза), но я также получил undefined для обоих значений.

После проверки всего, что я увидел, вы написали datatype, а не dataType. После его изменения ответ в div равен name: 1234 age: asdf

Answer 2

Это правильное поведение. Когда вы отправляете форму, вы делаете синхронный вызов PHP, асинхронный вызов также будет выполнен, и это может произойти до перезагрузки страницы, но это бесполезно.

Если вы хотите просто выполнить вызов AJAX, не используйте <form>, введите <input type="button"> в качестве подтверждения и подключите событие onclick к вызову с помощью $("#buttonid").click().

Если вы хотите сохранить форму для людей, у которых отключен JS (хорошо), просто верните false при отправке, чтобы предотвратить синхронный вызов.

Answer 3

Вы должны вернуть false из вашего обработчика отправки

$('#postForm').submit(function(){ 
  blah... 
  return false; // <-- Add this line
});

Я думаю, ваш запрос выполняется, но затем он запускается снова как обычное сообщение, что приводит к обновлению страницы.Firebug показывает 2 POST-запроса?Что говорит Фиддлер?

Примечание: return false - это то же самое, что звонить preventDefault()

Answer 4

Вы не всегда видите пустую страницу.Если вы разрабатываете локально (быстрое соединение) или страница заблокирована, она может отображаться немедленно.Используйте параметр «persist» на вкладке «Net», чтобы Firebug не очищал панель «Net» при перезагрузке страницы.Тогда вы сможете определить, перезагружается ли он.

Я предполагаю, что он перезагружается, поскольку функция отправки не предотвращает действия по умолчанию и не возвращает false.

Answer 5

Я думаю, что обычная отправка формы на самом деле происходит так же, как и функция AJAX post.Вы должны отменить действие формы по умолчанию, используя preventDefault(). Вы можете увидеть, как это работает здесь .

По сути, вы заменяете эту строку кода

$('#postForm').submit(function(){

на

$('#postForm').submit(function(event){
event.preventDefault();

Что касается "неопределенных" значений записей, то на первый взгляд ваш код выглядит так, что, возможно, мы упустили из виду нечто простое.Я бы использовал FireBug , чтобы сделать несколько быстрых проверок работоспособности:

• URL, который фактически вызывается (проверьте, что он отправляется через POST, а не GET)
• Проверьтеданные, отправляемые в заголовок, чтобы убедиться в их правильности
• Проверьте возвращаемые данные, чтобы увидеть, можете ли вы найти что-то там нехорошее

Если все проверено, вероятно, на стороне PHP, попробуйтечто-то простое, например

print_r($_POST);

Это выведет все отправляемые значения сообщений, таким образом, вы сможете увидеть данные в необработанном виде (до кодирования в формате JSON) и проверить, действительно ли вы получаете данные,Обратите внимание, что вам, вероятно, придется просматривать это через FireBug после публикации данных.