JQuery не-AJAX POST

Есть ли простой метод не AJAX POST в jQuery?

Я ищу что-то, что эквивалентно форме на странице, и только скрытые поля устанавливаются через JavaScript, который затем получает POST-ed, заставляя браузер загружать страницу с помощью action. Просто обычный POST, но со значениями, установленными через jQuery.

Я предполагаю, что я мог бы продолжать реализовывать мой текущий метод, но мне любопытно, что jQuery обеспечивает быстрый способ. На заднем плане, я думаю, он динамически создавал бы эту форму со всеми скрытыми значениями и отправлял бы ее.

Ответы

Ответ 1

Приличный Дарин отличное решение.

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. Использование также немного более прямолинейно, например:

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

Ответ 2

Нет ничего встроенного. Вы можете создать динамическую форму, заполнив ее скрытыми полями, добавить ее в 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' },
]);

Ответ 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();
}

Ответ 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. */
});

Ответ 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"