JQueryに単純な非AJAX POSTメソッドがありますか?
JavaScriptを介して非表示フィールドが設定されているページのフォームと同等のものを探しています。JavaScriptによってPOSTが実行され、ブラウザがaction
を介してページセットをロードします。通常のPOSTですが、jQueryを介して値が設定されます。
私は現在のメソッドを実装し続けることができると思いますが、jQueryが迅速な方法を提供するかどうかに興味があります。バックグラウンドで、すべての非表示の値を使用してこのフォームを動的に作成し、送信することを想像しています。
整然としたダリンの優れたソリューションをわずかに。
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'
});
組み込みのものはありません。非表示フィールドを入力する動的フォームを作成し、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' },
]);
私はこれらの回答が非常に便利であるとわかり、サーバー側のphpに配列も正しくポストするようにAnssi Herranenのソリューションを変更しました:
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();
}
著者はjQueryソリューションを求めましたが、これはplain 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. */
});