Ajax 发布到 PHP

Question

我正在本地 Apache 2.2 服务器上使用 PHP 5.3 测试 jQuery ajax post 方法（在这方面完全是新的）。这是文件，都在同一个文件夹中。

html body（head 中包含 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 post返回的值未定义。

不到一秒钟后，文本字段被清空，附加到 div 的文本消失了。不过，这似乎不是页面刷新，因为没有空页面闪烁。

这里发生了什么？我确定这是一个愚蠢的错误，但 Firebug 并没有告诉我任何事情。

更新：

查看Firebug Net显示POST返回状态为200，但返回3次预期的JSON对象：

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

Answer 1

将您的 queryRequest.js 的第 3 行更改为

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

应该为您完成这项工作。只是防止表单重新加载页面。

编辑：

刚刚将您的所有代码复制到我的本地环境并添加了event.preventDefailt()。 重新加载被取消并且服务器响应很好（不是答案的 3 倍）但我也得到了 undefined 两个值。

检查完所有内容后，我看到您写的是 datatype 而不是 dataType。更改后 div 中的响应为 name: 1234 age: asdf

Answer 2

您不会总是看到空白页闪烁。如果您是在本地开发（快速连接）或页面被 chached，那么它可能会立即显示。使用“Net”选项卡上的“persist”选项来防止 Firebug 在页面重新加载时清除 Net 面板。然后你应该能够判断它是否重新加载。

我的猜测是它确实会重新加载，因为您的提交函数不会阻止默认操作，也不会返回 false。

Answer 3

这是正确的行为。当您发布表单时，您正在对 PHP 进行同步调用，异步调用也将被执行，并且它可以在页面重新加载之前发生，但这样做没有用。

如果您只想进行 AJAX 调用，则不要使用 <form>，将 <input type="button"> 作为提交并将其 onclick 事件连接到使用 $("#buttonid").click() 的调用。

如果您想为禁用 JS 的人保留表单（好事），只需在提交时返回 false 以防止同步调用。

Answer 4

我认为正常的表单提交以及 AJAX 发布功能实际上正在发生。您应该使用 preventDefault() 取消表单的默认操作，您可以看到它是如何工作的 here。

基本上你替换了这行代码

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

与

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

关于“未定义”的帖子值，从外观上看，您的代码看起来不错，因此可能是我们忽略了一些简单的事情。我会使用FireBug 进行一些快速的健全性检查：

• 实际调用的 URL（检查它是通过 POST 而非 GET 发送的）
• 检查标头中发送的数据以确保其正确
• 检查返回的数据，看看您是否可以发现任何不妥之处

如果所有检查结果都可能是 PHP 方面的问题，请尝试一些简单的方法，例如

print_r($_POST);

这将输出所有发送的帖子值，这样您就可以看到原始形式的数据（在编码为 JSON 之前），并且您可以检查您是否实际接收到数据。请注意，一旦您发布了数据，您可能必须通过 FireBug 查看。

Answer 5

您必须从您的提交处理程序返回 false

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

我认为您的请求已执行，但随后又作为常规帖子重新开始，导致页面刷新。 Firebug 是否显示 2 个 POST 请求？提琴手怎么说？

注意：return false 等同于调用preventDefault()