有什么缺点,以张贴形式不
问题描述:
我想$post
数据contact_form.php无页面刷新或以任何其它运动比我有一个JS函数告诉它做的事。有什么缺点,以张贴形式不<form>标签
有人会问我为什么要这么做。原因是我希望我的表单在没有页面休息或打开contact_form.php的情况下发布。
所以我想这个没有<form>
标签。只需用div制作
我已经尝试了下面的每个解决方案。所有这些刷新页面。
- 回报= “”
- 目标= “_空白”
- 阿贾克斯
- JQ解决方案
JQ仍然刷新页面
$(document).ready(function(){
var $form = $('form');
$form.submit(function(){
$.post($(this).attr('action'), $(this).serialize(), function(response){
// do something here on success
},'json');
return false;
});
});
阿贾克斯人所以刷新页面
$('#submit').click(function() {
$.ajax({
url: 'contact_form.php',
type: 'POST',
data: {
email: '[email protected]',
message: 'hello world!'
},
success: function(msg) {
alert('Email Sent');
}
});
});
我也不想在此页面上的所有电子邮件的代码。我希望能够引用contact_form.php。
使用这种方法有什么不利吗?像安全性,功能性,可能是移动版本问题等?
答
您只需要使用event.preventDefault()
即可停止表单提交的默认行为。不使用形式的
$('#submit').click(function(e) {
// This will prevent page refresh
e.preventDefault();
$.ajax({
url: 'contact_form.php',
type: 'POST',
data: {
email: '[email protected]',
message: 'hello world!'
},
success: function(msg) {
alert('Email Sent');
}
});
});
实用缺点:
- 丑/坏DOM
- 您将无法使用
.submit
-
.serialize()
不会因为你需要工作分别获取所有输入字段的值。
答
$('#submit').click(function(e) {
e.preventDefault();
$.ajax({
url: 'contact_form.php',
type: 'POST',
data: {
email: '[email protected]',
message: 'hello world!'
},
success: function(msg) {
alert('Email Sent');
}
});
});
您必须使用preventDefault()