搜索并浏览了论坛,并尝试了许多 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 上显示成功或失败