javascript 如何在 AJAX 表单中使用 input type=submit
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18937103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use input type=submit with AJAX form
提问by alias51
I have the following AJAX script that I am using to return a random PIN number to a user when they register their email address:
我有以下 AJAX 脚本，用于在用户注册电子邮件地址时将随机 PIN 码返回给用户：
HTML
HTML
<form class="form-inline" role="form" id="formRegister">
<div class="form-group">
<label class="sr-only" for="srEmail">Email address</label>
<input type="email" name="srEmail" class="form-control input-lg" id="srEmail" placeholder="Enter email">
</div>
<button type="button" name="srSubmit" onClick="getSubmitResponse();" class="btn btn-default btn-lg">Generate PIN</button>
</form>
JS
JS
function getSubmitResponse(){
var emailId = $("#srEmail").val();
$.ajax({
type: "POST",
url: "register-ajax-call.php",
data: { srEmail: emailId, submiType: 'srSubmit'}
})
.done(function( html ) {
if(html.search('PIN:')!=-1){
window.location = "success.php?response="+html;
}else{
$( "#results").empty();
$("#results").append( html );
}
});
}
Question: how can I use button type="submit" rather than type="button" in this situation? My reasoning is that this is better markup for form validation and more consistent behaviours (e.g. when a user hits ENTER).
问题：在这种情况下如何使用按钮 type="submit" 而不是 type="button"？我的理由是，这是更好的表单验证标记和更一致的行为（例如，当用户点击 ENTER 时）。
I am also using jQuery if that is a solution.
如果这是一个解决方案，我也在使用 jQuery。
回答by Praveen
You can use .submit()method of jQuery like this
你可以.submit()像这样使用jQuery的方法
$("#formRegister").submit(function(event) {
var form = $( this ),
url = form.attr( 'action' );
var posting = $.post( url, { srEmail: ("#srEmail").val() } );
posting.done(function( data ) {
$("#results").append( html );
});
});
However you should think of giving the validation in the Client side, before submitting it. Since you already use jQuery, I would suggest you to take a look a jQuery.validateincase your form has more attributes.
但是，在提交之前，您应该考虑在客户端进行验证。由于您已经使用 jQuery，我建议您查看一下jQuery.validate您的表单是否具有更多属性。
回答by Black Sheep
You can do like this:
你可以这样做：
jQuery:
jQuery：
$("#formRegister").on("submit", function() {
$.ajax({
// Rest of code
});
return false;
});
回答by Thomas Pons
Just use onsubmit event and not onclick event.
只需使用 onsubmit 事件而不是 onclick 事件。
http://www.w3schools.com/jsref/event_form_onsubmit.asp
http://www.w3schools.com/jsref/event_form_onsubmit.asp
Then in your ajax function just return false; like that the form will not be send like usually and the browser will not refresh the page.
然后在你的 ajax 函数中只返回 false；这样表单不会像往常一样发送，浏览器也不会刷新页面。
Hope it helps
希望能帮助到你
