3

搜索并浏览了论坛,并尝试了许多 ajax 和表单提交的示例,但对于我想要实现的目标,没有任何东西可以接近。我必须承认我已经为此转了好几天,需要一个有一双新眼睛的人。

我有 2 页: page1.php page2.php

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

page1.php 如下(为了清楚起见,我省略了 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>

Page2.php 有一个 mysql 查询,用于检查数据库中的 checkname 并根据结果回显“成功”或“失败”。查询运行良好,没有显示任何错误。

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

我基本上希望 page1.php 保留并隐藏 #address div 并显示 #done div 何时从 page2.php 传递成功

希望有人可以提供帮助。

更新 我试过这个测试页:

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';
}

使用上面的萤火虫显示以下错误:

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

但是,当我删除 ajax 调用时,提交工作并传递数据。那么,我是否可以假设如果您没有在 ajax 调用中指定表单变量,则不会将任何内容发布到下一页?

更新 2 对不起,我在这里回答自己。看来您需要指定要在 ajax 调用中发送的表单数据。我刚刚添加了:

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

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

4

2 回答 2

0

您需要添加id="theForm"表单标签本身。

例子:

<form action="page2.php" method="post" id="theForm" name="theForm">
于 2013-02-21T19:19:53.693 回答
-1

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

于 2013-11-17T19:53:27.203 回答