jQuery非AJAX POST

Question

jQuery中是否有简单的非AJAX POST方法？

我正在寻找与在页面上仅通过JavaScript设置隐藏字段的表单等效的东西，然后进行POST提交，从而导致浏览器加载通过action设置的页面。只是普通的POST方法，但使用jQuery设置值。

我想我可以继续实现我的当前方法，但我很好奇jQuery是否提供了一种快速方法。在后台，它将动态创建具有所有隐藏值的表单并提交它。

- Brad

---

可能是Non-ajax GET/POST using jQuery (plugin?)的重复问题。 - Jacob

Answer 1

没有内置的方法。您可以创建一个动态表单，将其填充隐藏字段，添加到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' },
]);

- Darin Dimitrov

---

谢谢您提供的解决方案！它对我尝试通过将ASP.NET MVC中的删除操作标记为POST来保护它非常有帮助。 - Luis Aguilar

@trinth 大多数有用的功能在IE中不起作用，但这是一个非常有用的解决方案。 - Clain Dsilva

@ClainDsilva：同意这很有用，但是其他人可能想在自己发现之前知道注意事项。 - trinth

不需要method参数，因为GET请求只需使用location.window.href = URL_HERE。 - JoshuaDavid

我真的不明白为什么这不是被接受的答案。 - James

Answer 2

稍微整理了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();
}

这是与JSLint兼容的，它确保即使有可能的CSS定义，也不会在body标签结束时显示任何表单。使用方法也稍微更加简单，例如：

myFunction('/path/to/my/site/', 'post', {
    id: 1,
    quote: 'Quidquid Latine dictum sit altum videtur'
});

- Anssi Herranen

---

似乎甚至不需要将表单附加到页面上就可以工作。 - Domino

没关系，如果你不追加它，在IE中它不起作用。 - Domino

Answer 3

我发现这些答案非常有用，并修改了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();
}

- Mark B

---

我不明白为什么这个被踩了。这应该是正确的答案。但愿我能第一时间看到它，因为在回来并看到这个之前，我已经处理了30分钟的数组问题。 - taelor

同意，这允许发布数组，被接受的答案则不行。 - Xeaz

Answer 4

作者要求使用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. */
});

- Luke

Answer 5

我认为你可以使用类似以下的代码：

paramters = {key1: 'value1', key2: 'value2'}

jQuery.ajax({ 
   url:'/your/url', 
   data: jQuery.param(paramters),
   async:false,
   type:'POST',
   success: function(result){
       doSomethingWithYourResult(result);
   }
})

请注意设置'asyn=false'。

- bicccio

---

@biccio，这种方法行不通。虽然它会一直阻塞代码直到请求完成，但仍然使用了AJAX技术。请问需要如何翻译？ - Brad

@Brad，它工作得很好！！！它会像表单一样同步地向服务器发出POST调用，并传递您想要的每个值，就像隐藏字段一样。该函数是ajax，但它不像ajax那样工作，它像表单一样同步工作... - bicccio

@biccio，是的，我明白你的意思，但我想要一种能够同时完全重新加载页面的方法。这种方法并不能做到这一点。对于某些事情来说这是一个不错的解决方案，但对于我的应用程序来说不太适合。 - Brad