jQuery ajax表单提交响应在重新提交时不会更改
jQuery ajax表单提交响应在重新提交时不会更改
提问于 2015-09-20 03:53:44
注意:这是一个jQuery编码练习，我不允许使用插件或其他模块。
我有一个提交到php页面的jQuery表单。这个php页面检查电子邮件是否已经被接收。如果没有，则创建一个帐户。
为了降低复杂性，我不打算包含php页面。主要关注的是jQuery。
注意:我正在使用框架框架。
HTML：
<div class="container">
<form id="myForm" action="validate_signup.php" method="post">
<div class="row">
<div class="twelve columns">
<h3 class="center">Sign Up</h3>
</div>
</div><!--end row-->
<div class="row">
<div class="four columns offset-by-four">
<input class="u-full-width" type="email" placeholder="Email" id="email" name="email">
<span class="error">Email not entered</span>
</div>
</div><!--end row-->
<div class="row">
<div class="four columns offset-by-four">
<input class="u-full-width" type="password" placeholder="Password" id="pword" name="pword">
<span class="error">Password not entered</span>
</div>
</div><!--end row-->
<div class="row">
<div class="four columns offset-by-four">
<input class="u-full-width" type="text" placeholder="First Name" id="fname" name="fname">
<span class="error">First Name not entered</span>
</div>
</div><!--end row-->
<div class="row">
<div class="four columns offset-by-four">
<input class="u-full-width" type="text" placeholder="Last Name" id="lname" name="lname">
<span class="error">Last Name not entered</span>
</div>
</div><!--end row-->
<div class="row">
<div class="six columns offset-by-four">
<input class="button-primary" type="submit" value="Submit" name="signup">
</div>
</div><!--end row-->
</form>
<div class="row">
<div class="twelve columns">
<p id="response" class="center no-display"></p>
</div>
</div>
</div><!--end container-->
<script src="../js/jquery.js"></script>
<script src="../js/signup.js"></script>jQuery：
// jQuery form validation
$(document).ready(function(){
// field mapping
var form_fields = {
'email' : 'email',
'pword' : 'password',
'fname' : 'first name',
'lname' : 'last name'
};
// ajax data
var ajaxData = {};
// make sure form fields were entered
$('#myForm').on('submit', function() {
for (var field in form_fields) {
if (!$('#' + field).val()) {
$('#' + field).next().addClass('error_show');
} else if ($('#' + field).val()) {
$('#' + field).next().removeClass('error_show');
ajaxData[field] = $('#' + field).val();
}
}
// signup post field to indicate to php submission
ajaxData['signup'] = 'Submit';
// send data if it is all there
if (Object.keys(ajaxData).length === 5) {
var request = $.ajax({
url : 'validate_signup.php',
method : 'POST',
data : ajaxData,
dataType : 'html'
});
request.done(function(response) {
$('#response')
.append(response)
.show('slow');
});
}
return false;
});
});打印响应的主要HTML行是：
<div class="row">
<div class="twelve columns">
<p id="response" class="center no-display"></p>
</div>
</div>示例场景：
如果用户键入已被接收的电子邮件
电子邮件已在使用中，请使用另一封。
被输出。如果用户修改该条目并重新提交表单，将打印以下内容：
电子邮件已在使用中，请使用another.sign up完成
如果使用更新的响应删除旧响应数据，如何解决此问题？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-09-20 04:03:06
当您调用.append()时，您将向元素的主体添加更多内容。相反，您可以调用.html()来替换元素的主体。
你可以改变：
$('#response').append(response).show('slow');至：
$('#response').html(response).show('slow');但我认为最好在进行ajax调用之前调用.hide()和.empty()。
$('#response').hide().empty();这样，当单击submit按钮时，旧的响应就会消失，当ajax调用返回时，它将再次缓慢地移动。
Stack Overflow用户
发布于 2015-09-20 04:02:57
为html中的错误元素提供一个id：
<div class="four columns offset-by-four">
<input class="u-full-width" type="email" placeholder="Email" id="email" name="email">
<span class="error">Email not entered</span>
<span id="requestError"></span>
</div>通过ajax调用中的成功和错误函数，您可以显示接收到的错误：
var request = $.ajax({
url : 'validate_signup.php',
method : 'POST',
data : ajaxData,
dataType : 'html',
success : function(data) {
$('#requestError').html(data);
},
error : function() {
$('#requestError').html("Error while AJAX");
}
});我希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32675626
复制相关文章
相似问题
腾讯云开发者
