Ajax表单提交、验证和返回成功或失败

Question

搜索并浏览了论坛，尝试了很多ajax和表单提交的例子，但是没有任何东西可以接近我想要实现的目标。我必须承认，我已经绕了好几天圈，需要一个长着一双新眼睛的人。

我有2页: page1.php，page2.php

使用Google /1.9.0/jquery.js并在本地开发。

the如下(为了清晰起见，我省略了head脚本和body/html标记)

$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
      type: "POST",
      url: "page2.php",
      data: 'html',
     success: function(html){
        if(html == 'success'){
        $('#address').fadeOut('slow');
        $('#done').fadeIn('slow');
    }else if(html == 'fail'){
       alert('fail');
    }
}
});
return false;
});
});

<div id="address">
<form action="page2.php" method="post" name="theForm">
<input name="checkname" type="text" id="checkname">
 <input name="Proceed" type="submit" id="submit" value="Next Page" />
</form>
</div>
<div id="done">
That Worked!
</div>

the有一个mysql查询，它检查数据库中的校验名，并根据结果回显“成功”或“失败”。查询运行良好，没有显示任何错误。

提交表单时，page2.php加载并在浏览器中显示“成功”。Firebug在response和html中也显示了成功。在firebug中没有错误。

我基本上想让page1.php留下来，让#address div隐藏，并让# to div显示成功何时从page2.php传递出去。

希望有人能帮忙。

Update I尝试了以下测试页面：

ajaxone.php

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#theForm').submit(function(){

$.ajax({
type: "POST",
url: "ajaxtwo.php",
data: 'html',
success: function(html){
    if(html == 'success'){
        $('#address').fadeOut('slow');
    $('#payment').fadeIn('slow');
        alert('ok');
    }else if(html == 'fail'){
       alert('fail');
    }
}
});
    return false;
});
});
</script>
<style type="text/css">
#payment{
visibility:hidden;
}
</style>

<div id="address">
<form action="ajaxtwo.php" method="post" name="theForm" id="theForm">
<p>
    <input name="name" type="text" id="name">
</p>
  <p>
    <input type="submit" name="submit" value="submit">
</p>
</form></div>
<div id="payment">Name is correct</div>

ajaxtwo.php

print_r($_POST);
if($_POST['name'] == 'rob'){
echo 'success';
}else{
echo 'fail';
}

使用上面的firebug显示了以下错误：

数组()未定义索引:名称失败

但是，当我删除ajax调用时，提交工作和数据将被传递。那么，如果您不指定ajax调用中的表单变量，那么我是否正确地假设，没有任何东西被发布到下一页？

更新2对不起，我在这里回答我自己。您确实需要指定要在ajax调用中发送的表单数据。我刚才补充说：

$('#theForm').serialize();

在ajax调用中，现在表单提交时没有错误。但是，这仍然会发生在ajaxtwo.php上，并且不会在ajaxone.php页面上显示成功或失败。所以我的下一个阶段是在ajaxone.php上获得成功或失败

Answer 1

您需要在表单标记本身中添加id="theForm"。

示例：

<form action="page2.php" method="post" id="theForm" name="theForm">

Answer 2

我会说，添加a，然后让jq读取输出，然后相应地重定向，或者使用php根据$success_fail结果进行重切。