jQuery 非 AJAX POST
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5524045/
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
jQuery non-AJAX POST
提问by Brad
Is there a simple non-AJAX POST method in jQuery?
jQuery 中是否有简单的非 AJAX POST 方法？
I am looking for something equivalent to a form on a page with nothing but hidden fields set via JavaScript which then gets POST-ed, causing the browser to load the page set via action. Just a normal POST, but with values set via jQuery.
我正在寻找与页面上的表单等效的东西，除了通过 JavaScript 设置的隐藏字段之外什么都没有，然后被 POST-ed，导致浏览器通过action. 只是一个普通的 POST，但值是通过 jQuery 设置的。
I suppose I could keep implementing my current method, but I am curious if jQuery provides a quick way. In the background, I imagine it would dynamically create this form with all of the hidden values and submit it.
我想我可以继续实现我当前的方法，但我很好奇 jQuery 是否提供了一种快速的方法。在后台，我想它会用所有隐藏值动态创建这个表单并提交它。
回答by Darin Dimitrov
There is nothing built-in. You could create a dynamic form populating it with hidden fields, add it to the DOM and trigger a submit. Here's an example:
没有任何内置的东西。您可以创建一个动态表单，用隐藏字段填充它，将其添加到 DOM 并触发提交。下面是一个例子：
function submit(action, method, values) {
var form = $('<form/>', {
action: action,
method: method
});
$.each(values, function() {
form.append($('<input/>', {
type: 'hidden',
name: this.name,
value: this.value
}));
});
form.appendTo('body').submit();
}
submit('http://www.example.com', 'POST', [
{ name: 'key1', value: 'value1' },
{ name: 'key2', value: 'value2' },
{ name: 'key3', value: 'value3' },
]);
回答by Anssi Herranen
Tidied Darin's excellent solution slightly.
稍微整理了 Darin 的优秀解决方案。
function myFunction(action, method, input) {
'use strict';
var form;
form = $('<form />', {
action: action,
method: method,
style: 'display: none;'
});
if (typeof input !== 'undefined' && input !== null) {
$.each(input, function (name, value) {
$('<input />', {
type: 'hidden',
name: name,
value: value
}).appendTo(form);
});
}
form.appendTo('body').submit();
}
This is JSLint-compatible and makes sure that no form is displayed at the end of body tag despite possible css definitions. The usage is also slightly more straightforward, e.g:
这是 JSLint 兼容的，并确保尽管可能存在 css 定义，但不会在 body 标记的末尾显示任何表单。用法也稍微简单一些，例如：
myFunction('/path/to/my/site/', 'post', {
id: 1,
quote: 'Quidquid Latine dictum sit altum videtur'
});
回答by Mark B
I found these answers very useful, and have modified Anssi Herranen's solution to also post arrays to server-side php correctly:
我发现这些答案非常有用，并修改了 Anssi Herranen 的解决方案，以正确地将数组发布到服务器端 php：
function jqueryPost(action, method, input) {
"use strict";
var form;
form = $('<form />', {
action: action,
method: method,
style: 'display: none;'
});
if (typeof input !== 'undefined') {
$.each(input, function (name, value) {
if( typeof value === 'object' ) {
$.each(value, function(objName, objValue) {
$('<input />', {
type: 'hidden',
name: name + '[]',
value: objValue
}).appendTo(form);
} );
}
else {
$('<input />', {
type: 'hidden',
name: name,
value: value
}).appendTo(form);
}
});
}
form.appendTo('body').submit();
}
回答by Luke
The author asked for a jQuery solution, but this can just as easily be done with plain JavaScript:
作者要求提供一个 jQuery 解决方案，但这也可以使用普通的 JavaScript轻松完成：
function post (action, nameValueObj){
var form = document.createElement("form");
var i, input, prop;
form.method = "post";
form.action = action;
for (prop in nameValueObj) { // Loop through properties: name-value pairs
input = document.createElement("input");
input.name = prop;
input.value = nameValueObj[prop];
input.type = "hidden";
form.appendChild(input);
}
//document.body.appendChild(form); <-- Could be needed by some browsers?
form.submit();
return form;
}
// Example usage:
post("actionPage.html", {
"field1": "hello",
"field2": "world"
/* etc. */
});
回答by bicccio
i think you can use something like:
我认为你可以使用类似的东西：
paramters = {key1: 'value1', key2: 'value2'}
jQuery.ajax({
url:'/your/url',
data: jQuery.param(paramters),
async:false,
type:'POST',
success: function(result){
doSomethingWithYourResult(result);
}
})
Note the 'asyn=false' setting
注意 'asyn=false' 设置
