我有以下代码,假设通过Ajax提交表单而无需重新加载页面:
$( document ).on('submit', '.login_form', function( event ){
event.preventDefault();
var $this = $(this);
$.ajax({
data: "action=login_submit&" + $this.serialize(),
type: "POST",
url: _ajax_login_settings.ajaxurl,
success: function( msg ){
ajax_login_register_show_message( $this, msg );
}
});
});
然而由于某种原因,尽管event.preventDefault();
函数应该阻止表单实际触发,但实际上它会触发。
我的问题是,如何阻止上述表单重新加载页面?
由于
答案 0 :(得分:2)
不要在文档上附加监听器,而是在提交按钮上使用on click处理程序并将类型更改为按钮。
<button id="form1SubmitBtn">Submit</button>
$('#form1SubmitBtn').click(function(){
//do ajax here
});
快乐编码!!!
答案 1 :(得分:0)
$(".login_form").on('submit', function( event ){
var $this = $(this);
$.ajax({
data: "action=login_submit&" + $this.serialize(),
type: "POST",
url: _ajax_login_settings.ajaxurl,
success: function( msg ){
ajax_login_register_show_message( $this, msg );
}
});
event.preventDefault();
});
答案 2 :(得分:0)
你可以使用jquery和ajax来做到这一点。下面是一个很好的部分代码,它不刷新页面,而是提交表单隐藏,并被谢谢消息取代。表单数据使用sendmail.php脚本发送到电子邮件地址。
假设您的表单有3个输入字段 - 名称,电子邮件和消息。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery("#button").click(function() {
var name=jQuery('#name').val();
var email=jQuery('#email').val();
var message=jQuery('#message').val();
var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
jQuery.ajax({
type: "POST",
url: "sendmail.php",
data: dataString,
success: function() {
jQuery('#contact_form').html("<div id='message'></div>");
jQuery('#contactForm').hide();
jQuery('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>Thank you for your submission. We will be in touch shortly.</p>").hide()
.fadeIn(1500, function() {
});
}
});
return false;
});
});
</script>
在表单标签的顶部,只需添加此标签即可显示感谢信息。
<div id='message'></div>
享受编码!!!!!!!