Question

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

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);
?>

输入两个字段并按“提交”后，调用success方法，附加文本，但是从ajax post返回的值是未定义的。

然后在不到一秒钟之后，文本字段被清空，并且附加到div的文本消失了。但是，似乎它不是页面刷新，因为没有空页闪存。

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

更新：

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

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

Answer 1

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

基本上你替换这行代码

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

与

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

关于“未定义”的帖子值，在它的外观上你的代码看起来很合理，所以它可能是我们忽略的简单。我会使用FireBug进行一些快速的健全性检查：

实际调用的URL（检查是通过POST发送而不是GET）
检查标题中发送的数据以确保其正确
检查返回的数据以查看是否可以发现任何不适用的内容

如果所有检查都可能是PHP方面，请尝试像

这样的简单方法

print_r($_POST);

这将输出所有发送的帖子值，这样你就可以看到原始格式的数据（在编码为JSON之前），你可以检查你是否真正接收了数据。请注意，一旦发布数据，您可能需要通过FireBug查看此内容。

Answer 2

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

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

我认为您的请求已执行，但之后它又作为常规帖子重新启动，从而导致页面刷新。 Firebug是否显示2个POST请求？ Fiddler说什么？

注意：return false与调用preventDefault()

相同

Answer 3

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

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

Answer 4

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

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

如果你想为那些已经禁用JS的人保留表单（好东西），只需在提交时返回false以防止同步调用。

Answer 5

将queryRequest.js的第3行更改为

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

应该为你做这份工作。只是阻止表单重新加载页面。

编辑：

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

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

Ajax发布到PHP

5 个答案: