如何将 jQuery .ajax 用于我的表单操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10041496/
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 jQuery .ajax to my form's action
提问by daison12006013
I changed my coding style for php and jQuery, but my Registration
我更改了 php 和 jQuery 的编码风格，但我的注册
$("#reg_form_company").bind("submit", function() {
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : $(this).attr('action'),
data : $(this).serializeArray(),
success : function(data) {
$(".printArea").empty().append(data).css('visibility','visible');
}
});
return false;
});
Then this is my Form
那么这是我的表格
<form id="reg_form_company" action="index.php?module=register&actionregister" method="post" >
<input>[...]</input>
</form>
Then after clicking the "Submit" button, it doesn't work, I assume that somebody can help me to solve this problem, coz the $.ajax might confuse about POST(for inputs) and the GET(for the parameters of the "action" form)
然后单击“提交”按钮后，它不起作用，我假设有人可以帮助我解决这个问题，因为 $.ajax 可能会混淆 POST（用于输入）和 GET（用于“的参数”行动”形式）
I appreciate for your help, you can also modify the entire jQuery code if it's required.
感谢您的帮助，如果需要，您还可以修改整个 jQuery 代码。
Sorry guys for not including the #reg_form_company, and the fancybox
抱歉，没有包括#reg_form_company 和fancybox
回答by Alex
You need to do something like this: http://jsfiddle.net/xSJTs/2/
你需要做这样的事情：http: //jsfiddle.net/xSJTs/2/
$('form').on('submit',function(e){
e.preventDefault();
$.ajax({
type : "POST",
cache : false,
url : $(this).attr('action'),
data : $(this).serialize(),
success : function(data) {
$(".printArea").empty().append(data).css('visibility','visible');
}
});
});
You have to use serialize()instead of serializeArray(). serializeArray()creates a JavaScript-object, serialize()creates a query-string.
你必须使用serialize()而不是serializeArray(). serializeArray()创建一个 JavaScript 对象，serialize()创建一个查询字符串。
Serialize: http://api.jquery.com/serialize/
序列化：http: //api.jquery.com/serialize/
SerializeArray: http://api.jquery.com/serializeArray/
序列化数组：http: //api.jquery.com/serializeArray/
Basically you wait until the form is submitted and then you interrupt it (e.preventDefault();).
基本上，您会等到表单提交后，然后中断它 ( e.preventDefault();)。
回答by Bogdan Emil Mariesan
You must intercept the click/submit event for your form and refer the form as shown bellow:
您必须拦截表单的点击/提交事件并引用表单，如下所示：
$("#myForm").submit(function(){
var $form = $(this);
$.ajax({
type : "POST",
cache : false,
url : $form.attr('action'),
data : $form.serializeArray(),
success : function(data) {
$(".printArea").empty().append(data).css('visibility','visible');
}
});
})
And add an id to your form like:
并在您的表单中添加一个 id，例如：
<form id="myForm" action="index.php?module=register&actionregister" method="post" >
<input>[...]</input>
</form>
回答by amd
you must refere your form instead of $(this)
你必须参考你的表格而不是 $(this)
give your form an id or class ex :
给你的表单一个 id 或 class ex ：
<form action="index.php?module=register&actionregister" method="post" id="MyForm">
<input>[...]</input>
</form>
and in JQuery :
在 JQuery 中：
$.ajax({
type : "POST",
cache : false,
url : $('#MyForm').attr('action'),
data : $('#MyForm').serializeArray(),
success : function(data) {
$(".printArea").empty().append(data).css('visibility','visible');
}
});
回答by 538ROMEO
Ajax that works for file inputs
适用于文件输入的 Ajax
Hi,
the other answers has not workedfor me since I needed to pass filesinputs and thoses cannot be "serialized".
嗨，
其他答案对我不起作用，因为我需要传递文件输入，而那些不能“序列化”。
The good way is to pass it via FormDataand disable processData:
好的方法是通过它FormData并禁用它processData：
$('form').on('submit',function(e){
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type : "POST",
cache : false,
url : $(this).attr('action'),
data : formData,
success : function(data) {
//$(".printArea").empty().append(data).css('visibility','visible');
},
contentType: false,
processData: false
});
});
Hope it helped ;)
希望它有所帮助;)
回答by Matt
//This is still showing the cgi output of my script in the browser
$('#myForm').submit(function()){
$('#myForm').preventDefault();
$.ajax({
type : "POST",
cache : false,
url : $('#myForm').attr('action'),
data : $('#myForm').serialize(),
success : function(data) {
$(".printArea").empty().append(data).css('visibility','visible');
};
<form id = "myForm" action="cgi-bin/matt/matt-test.cgi?module=register&actionregister" method ="post">
