我对jQuery和Ajax非常陌生，所以我组装了一个小系统，看看我是否可以生成一个具有各种新功能的表单，希望将来能使用这些技术。这是一个简单的表格，用于提交姓名、姓氏、电子邮件和电话号码。
当你填写表格并提交时，一切都很好，回复也很好。然而，在响应消息消失并且表单的字段被清除后，输入新数据并提交表单会导致ajax请求成功执行，但不会向操作文件发送任何内容，因为响应区域（响应消息将正常显示的地方）会像有消息一样展开，但不会显示任何内容。我不确定如何更好地说明我的问题，所以希望有人能从代码中看到：
<div id="wrap">
<div id="response">
<span></span>
<div id="ri1"></div>
<div id="ri2" class="r_user"></div>
</div>
<span class="wraptitle">Form Standard</span>
<form method="post" action="process.php" id="mainform" name="mainform">
<table width="605" cols="3" border="0">
<tr>
<td width="155">
First Name
<br /><span class="error" id="fname_error"></span>
</td>
<td width="450" colspan="2"><input type="text" name="firstname" id="firstname" class="input" /></td>
</tr>
<tr>
<td width="155">
Second Name
<br /><span class="error" id="sname_error"></span>
</td>
<td width="450" colspan="2"><input type="text" name="secondname" id="secondname" class="input" /></td>
</tr>
<tr>
<td width="155">
Email address
<br /><span class="error" id="email_error"></span>
</td>
<td width="450" colspan="2"><input type="text" name="emailaddr" id="emailaddr" class="input" /></td>
</tr>
<tr>
<td width="155">
Phone Number
<br /><span class="error" id="phoneno_error"></span>
</td>
<td width="450" colspan="2"><input type="text" name="phoneno" id="phoneno" class="input" /></td>
</tr>
<tr>
<td width="155"></td>
<td width="390"><input type="submit" name="submit" id="submit" value="Submit Form" class="input button" /></td>
<td width="60" id="loader"></td>
</tr>
</table>
</form>
</div>
process.php：
if(!empty($_POST['firstname'])
&&!empty($_POST['secondname'])
&&!empty($_POST['emailaddr'])
&&!empty($_POST['phoneno']))
{
$response_array = array(
'status' => 'success',
'message' => 'Congratulations, everything went fine.');
header('Content-type: application/json');
echo(json_encode($response_array));
}
else
{
$response_array = array(
'status' => 'fail',
'message' => 'Massive Fail.');
header('Content-type: application/json');
echo(json_encode($response_array));
}
jQuery（</body>之前的最后一件事）
$(document).on('submit','#mainform',function(e)
{
//e.preventDefault();
$('#submit').attr('disabled','disabled');
var form = $(this);
var post_url = form.attr('action');
var is_error = false;
$('#loader', form).html('<img src="load_big_grey.gif" border="0" width="48" height="15" style="margin:6px auto;display:block;" />');
var firstname = $('#firstname').val();
var secondname = $('#secondname').val();
var emailaddr = $('#emailaddr').val();
var phoneno = $('#phoneno').val();
var post_data = 'firstname='+firstname+'&secondname='+secondname+'&emailaddr='+emailaddr+'&phoneno='+phoneno;
$('.error').attr('style','display:none;');
if(firstname==''){
$('#fname_error').html('Required field').attr('style','display:block;');
is_error = true;}
// More client-side validation as above
if(is_error)
{
$('#loader', form).html('');
return false;
}
else
{
$.ajax({
type: "POST",
url: post_url,
data: post_data,
dataType: 'json',
cache: 'false',
success: function(ret)
{
if(ret != '')
{
/* Dealing with the server response */
var m_status = ret.status;
var m_message = ret.message;
var empty_fld = true;
$('#loader', form).html('');
// THIS IS THE PART THAT DISPLAYS AN APPROPRIATE RESPONSE
if(m_status=='success')
{ $('#response').removeClass().addClass('r_pos');
$('#ri1').removeClass().addClass('r_check');}
else
if(m_status=='fail')
{ $('#response').removeClass().addClass('r_neg');
$('#ri1').removeClass().addClass('r_cross');
empty_fld = false;}
$('#response span').html(m_message);
$('#response').css('display','block');
setTimeout(function()
{
$('#response').fadeTo(500,0);
setTimeout(function()
{
$('#response').css('display','none');
$('#submit').removeAttr('disabled');
if(empty_fld)
{
$('#firstname').val('');
$('#secondname').val('');
$('#emailaddr').val('');
$('#phoneno').val('');
}
},500);
},4000);
}
else
{
/* The response from the server was undefined */
$('#loader', form).html('');
$('#response').removeClass().addClass('r_neg');
$('#response span').html('There was a problem communicating with the server!');
$('#ri1').removeClass().addClass('r_cross');
$('#response').css('display','block');
setTimeout(function()
{
$('#response').fadeTo(500,0);
setTimeout(function()
{
$('#response').css('display','none');
$('#submit').removeAttr('disabled');
},500);
},4000);
}
}
});
return false;
}
});
（有点觉得我不应该包含那么多…：p）我环顾四周，看到了一些关于重新绑定事件的事情（我想我是通过使用on（）而不是submit（）来完成的），以及其他一些我可以尝试的事情，但似乎都不起作用。非常感谢您的帮助！Luke
更改成功函数后：
success: function(ret, textStatus)
{
console.log(ret);
console.log(textStatus);
...
}
我发现服务器的响应没有问题，它以我期望的方式完美地提交和响应。我无法直接确定问题是什么，但通过在我的响应部分添加一个包装器，并使用.html（）更新它，而不是切换类，我得到了我想要的结果：
<div id="rwrap">
<div id="response">
<span></span>
<div id="ri1"></div>
<div id="ri2"></div>
</div>
</div>
jQuery:
var m_status = ret.status;
var m_message = ret.message;
var empty_fld = true;
$('#loader').html('');
if(m_status=='success')
{
$('#rwrap').html('<div id="response" class="r_pos"><span>'+m_message+'</span><div id="ri1" class="r_check"></div><div id="ri2" class="r_user"></div></div>');
}
else if(m_status=='fail')
{
$('#rwrap').html('<div id="response" class="r_neg"><span>'+m_message+'</span><div id="ri1" class="r_cross"></div><div id="ri2" class="r_user"></div></div>');
empty_fld = false;
}
感谢那些做出贡献的人！
您的代码目前有很多不太好的地方。我会在这里列出它们，这样你就可以修复它们。
-
mainform一直在那里。将事件处理程序直接附加到表单$('#mainform').submit(function(event) { // your code }); -
请勿使用
attr更改按钮的启用/禁用状态。请改用prop。 - 使用jQuery的css命令可以添加或删除css属性。请参见css
-
success回调函数需要三个参数（data、textStatus和jqXHR）。使用它们：
success: function(ret, textStatus, jqXHR) { // your code } -
使用适当的缩进来查看语句的范围。
更具体地说，把其他和连接的if放在一条线上，看看它在开会。
if(m_status=='success')
{
$('#response').removeClass().addClass('r_pos');
$('#ri1').removeClass().addClass('r_check');
}
else if(m_status=='fail') {
$('#response').removeClass().addClass('r_neg');
$('#ri1').removeClass().addClass('r_cross');
empty_fld = false;
}
如果这一系列问题都得到了解决，那么如果问题仍然存在，您可以查看实际问题。