JQuery не-AJAX POST

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

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

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

5 ответов

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

function myFunction(action, method, input) {
 'use strict';
 var form;
 form = $('<form><code>', {
 action: action,
 method: method,
 style: 'display: none;'
 });
 if (typeof input !== 'undefined' && input !== null) {
 $.each(input, function (name, value) {
 $('', {
 type: 'hidden',
 name: name,
 value: value
 }).appendTo(form);
 });
 }
 form.appendTo('body').submit();
}
</code>
<p>Это совместимость с JSLint и гарантирует, что в конце тега тела не будет отображаться форма, несмотря на возможные определения css. Использование также немного более прямолинейно, например:</p>
<pre class="prettyprint linenums">myFunction('/path/to/my/site/', 'post', {
 id: 1,
 quote: 'Quidquid Latine dictum sit altum videtur'
});


Нет ничего встроенного. Вы можете создать динамическую форму, заполнив ее скрытыми полями, добавить ее в DOM и вызвать отправку. Вот пример:

function submit(action, method, values) {
 var form = $('<form><code>', {
 action: action,
 method: method
 });
 $.each(values, function() {
 form.append($('', {
 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' },
]);
</code></form>


Я нашел эти ответы очень полезными и изменил решение Anssi Herranen, чтобы правильно разместить серверы на серверной php:

function jqueryPost(action, method, input) {
 "use strict";
 var form;
 form = $('<form><code>', {
 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) { 
 $('', {
 type: 'hidden',
 name: name + '[]',
 value: objValue
 }).appendTo(form);
 } ); 
 }
 else {
 $('', {
 type: 'hidden',
 name: name,
 value: value
 }).appendTo(form);
 }
 });
 }
 form.appendTo('body').submit();
}
</code></form>


Автор попросил решение 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. */
});


Я думаю, вы можете использовать что-то вроде:

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"

licensed under cc by-sa 3.0 with attribution.