我是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（））完成了一些事情，还有一些我可以尝试的事情，但似乎没有任何效果。非常感谢您的帮助！路加
答案 0 :(得分：1)
更改成功功能后：
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;
}
感谢那些贡献的人！
答案 1 :(得分：0)
目前，您的代码中有许多内容并不是很好。我会在这里列出它们，以便你可以修复它们。
mainform一直都在那里。将事件处理程序直接附加到表单
$('#mainform').submit(function(event) {
// your code
});
请勿使用attr更改按钮的启用/禁用状态。请改用prop。
成功回调函数需要三个参数（data，textStatus，jqXHR）。使用它们：
success: function(ret, textStatus, jqXHR) {
// your code
}
使用适当的缩进来查看陈述的范围。
更具体地说，将else和connected 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;
}
如果修复了这一系列问题，您可以查看实际问题是否仍然存在。