我对 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>
进程.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) 我环顾四周，看到了一些关于重新绑定(bind)事件的事情(我想我已经通过使用 on() 而不是 submit() 完成了)和其他一些我可以尝试但似乎没有任何效果的事情。非常感谢您的帮助!卢克
最佳答案
更改成功函数后:
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;
}
感谢那些做出贡献的人!
关于php - jQuery Ajax 请求仅适用于单个表单提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17860429/