フォーム送信のようなJavaScript投稿リクエスト
ブラウザを別のページに誘導しようとしています。 GETリクエストが欲しいなら、私は言うかもしれません
document.location.href = 'http://example.com/q=a';
しかし、私がアクセスしようとしているリソースは、POSTリクエストを使用しない限り正しく応答しません。これが動的に生成されなかった場合は、HTMLを使用します。
<form action="http://example.com/" method="POST">
<input type="hidden" name="q" value="a">
</form>
それから、DOMからフォームを送信します。
しかし、私は私が言うことを可能にするJavaScriptコードを本当に望みます
post_to_url('http://example.com/', {'q':'a'});
最良のクロスブラウザ実装は何ですか？
編集
すみません、私ははっきりしませんでした。フォームを送信するのと同じように、ブラウザの場所を変更するソリューションが必要です。これが XMLHttpRequest で可能な場合、それは明白ではありません。そしてこれは非同期でもXMLも使用すべきではないので、Ajaxは答えではありません。
/**
* sends a request to the specified url from a form. this will change the window location.
* @param {string} path the path to send the post request to
* @param {object} params the paramiters to add to the url
* @param {string} [method=post] the method to use on the form
*/
function post(path, params, method) {
method = method || "post"; // Set method to post by default if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
例：
post('/contact/', {name: 'Johnny Bravo'});
_ edit _ ：これは大いに支持されているので、私は人々がこれをたくさんコピーペーストするだろうと思います。そのため、不注意によるバグを修正するためにhasOwnPropertyチェックを追加しました。
これは、 jQuery を使用して選択した回答のバージョンになります。
// Post to the provided URL with the specified parameters.
function post(path, parameters) {
var form = $('<form></form>');
form.attr("method", "post");
form.attr("action", path);
$.each(parameters, function(key, value) {
var field = $('<input></input>');
field.attr("type", "hidden");
field.attr("name", key);
field.attr("value", value);
form.append(field);
});
// The form needs to be a part of the document in
// order for us to be able to submit it.
$(document.body).append(form);
form.submit();
}
この答え で提供されているcreateElement関数を使用してください。これは、 IEがname属性を持っていないために必要ですdocument.createElementで通常作成された要素：
function postToURL(url, values) {
values = values || {};
var form = createElement("form", {action: url,
method: "POST",
style: "display: none"});
for (var property in values) {
if (values.hasOwnProperty(property)) {
var value = values[property];
if (value instanceof Array) {
for (var i = 0, l = value.length; i < l; i++) {
form.appendChild(createElement("input", {type: "hidden",
name: property,
value: value[i]}));
}
}
else {
form.appendChild(createElement("input", {type: "hidden",
name: property,
value: value}));
}
}
}
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}
Rakesh Paiの答え はすごい、しかし私がsubmitと呼ばれるフィールドを持つフォームを投稿しようとすると（ Safari に）起こる問題がある。例えば、post_to_url("http://google.com/",{ submit: "submit" } );です。この可変空間の衝突を回避するために、関数に少しパッチを当てました。
function post_to_url(path, params, method) {
method = method || "post";
var form = document.createElement("form");
//Move the submit function to another variable
//so that it doesn't get overwritten.
form._submit_function_ = form.submit;
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
document.body.appendChild(form);
form._submit_function_(); //Call the renamed function.
}
post_to_url("http://google.com/", { submit: "submit" } ); //Works!
いいえ、フォーム送信のようなJavaScript投稿リクエストはできません。
あなたが持つことができるのはHTMLのフォームであり、そしてJavaScriptでそれを提出する。 （このページで何度も説明されているように）
あなたは自分でHTMLを作成することができます、あなたはHTMLを書くためにJavaScriptを必要としません。人々がそれを示唆すれば、それはばかげているでしょう。
<form id="ninja" action="http://example.com/" method="POST">
<input id="donaldduck" type="hidden" name="q" value="a">
</form>
あなたの機能は単にあなたが望むようにフォームを設定するでしょう。
function postToURL(a,b,c){
document.getElementById("ninja").action = a;
document.getElementById("donaldduck").name = b;
document.getElementById("donaldduck").value = c;
document.getElementById("ninja").submit();
}
それから、それを好きに使ってください。
postToURL("http://example.com/","q","a");
しかし、私はその機能を省いてただそうするだけです。
document.getElementById('donaldduck').value = "a";
document.getElementById("ninja").submit();
最後に、スタイルの決定はccsファイルで行われます。
.ninja{
display:none;
}
個人的には、フォームは名前で扱うべきだと思いますが、それは今重要ではありません。
Prototype がインストールされている場合は、次のように隠しフォームを生成して送信するためのコードを強化することができます。
var form = new Element('form',
{method: 'post', action: 'http://example.com/'});
form.insert(new Element('input',
{name: 'q', value: 'a', type: 'hidden'}));
$(document.body).insert(form);
form.submit();
これはrakeshの答えですが、配列をサポートしています（フォームではかなり一般的です）。
普通のJavaScript：
function post_to_url(path, params, method) {
method = method || "post"; // Set method to post by default, if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
var addField = function( key, value ){
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", value );
form.appendChild(hiddenField);
};
for(var key in params) {
if(params.hasOwnProperty(key)) {
if( params[key] instanceof Array ){
for(var i = 0; i < params[key].length; i++){
addField( key, params[key][i] )
}
}
else{
addField( key, params[key] );
}
}
}
document.body.appendChild(form);
form.submit();
}
ああ、そしてこれがjqueryのバージョンだ：（ちょっと違うコードだが、同じことになる）
function post_to_url(path, params, method) {
method = method || "post"; // Set method to post by default, if not specified.
var form = $(document.createElement( "form" ))
.attr( {"method": method, "action": path} );
$.each( params, function(key,value){
$.each( value instanceof Array? value : [value], function(i,val){
$(document.createElement("input"))
.attr({ "type": "hidden", "name": key, "value": val })
.appendTo( form );
});
} );
form.appendTo( document.body ).submit();
}
さて、私がRakesh Paiの答えからこれを作成する時間を無駄にしなかったように私が他のすべての記事を読んだことを望みなさい。これは配列とオブジェクトを扱う再帰的な解決策です。 jQueryには依存しません。
フォーム全体を配列のように送信する必要がある場合を処理するためのセグメントを追加しました。 （つまり、項目のリストの周囲にラッパーオブジェクトがない場合）
/**
* Posts javascript data to a url using form.submit().
* Note: Handles json and arrays.
* @param {string} path - url where the data should be sent.
* @param {string} data - data as javascript object (JSON).
* @param {object} options -- optional attributes
* {
* {string} method: get/post/put/etc,
* {string} arrayName: name to post arraylike data. Only necessary when root data object is an array.
* }
* @example postToUrl('/UpdateUser', {Order {Id: 1, FirstName: 'Sally'}});
*/
function postToUrl(path, data, options) {
if (options === undefined) {
options = {};
}
var method = options.method || "post"; // Set method to post by default if not specified.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
function constructElements(item, parentString) {
for (var key in item) {
if (item.hasOwnProperty(key) && item[key] != null) {
if (Object.prototype.toString.call(item[key]) === '[object Array]') {
for (var i = 0; i < item[key].length; i++) {
constructElements(item[key][i], parentString + key + "[" + i + "].");
}
} else if (Object.prototype.toString.call(item[key]) === '[object Object]') {
constructElements(item[key], parentString + key + ".");
} else {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", parentString + key);
hiddenField.setAttribute("value", item[key]);
form.appendChild(hiddenField);
}
}
}
}
//if the parent 'data' object is an array we need to treat it a little differently
if (Object.prototype.toString.call(data) === '[object Array]') {
if (options.arrayName === undefined) console.warn("Posting array-type to url will doubtfully work without an arrayName defined in options.");
//loop through each array item at the parent level
for (var i = 0; i < data.length; i++) {
constructElements(data[i], (options.arrayName || "") + "[" + i + "].");
}
} else {
//otherwise treat it normally
constructElements(data, "");
}
document.body.appendChild(form);
form.submit();
};
1つの解決策はフォームを生成して送信することです。一つの実装は
function post_to_url(url, params) {
var form = document.createElement('form');
form.action = url;
form.method = 'POST';
for (var i in params) {
if (params.hasOwnProperty(i)) {
var input = document.createElement('input');
input.type = 'hidden';
input.name = i;
input.value = params[i];
form.appendChild(input);
}
}
form.submit();
}
だから私は簡単なURL短縮ブックマークレットを実装することができます
javascript:post_to_url('http://is.Gd/create.php', {'URL': location.href});
ここに3つの選択肢があります。
標準のJavaScriptの答え：フレームワークを使う！ほとんどのAjaxフレームワークは XMLHTTPRequest POST）を作成する簡単な方法を抽象化しました。
XMLHTTPRequest要求を自分で作成し、getの代わりにopenメソッドにpostを渡します。 （ XMLHTTPRequest（Ajax） ）でPOSTメソッドを使用
JavaScriptを使用して、動的にフォームを作成し、アクションを追加し、入力を追加して送信します。
これが私がjQueryを使って書いた方法です。 FirefoxとInternet Explorerでテスト済み。
function postToUrl(url, params, newWindow) {
var form = $('<form>');
form.attr('action', url);
form.attr('method', 'POST');
if(newWindow){ form.attr('target', '_blank');
}
var addParam = function(paramName, paramValue) {
var input = $('<input type="hidden">');
input.attr({ 'id': paramName,
'name': paramName,
'value': paramValue });
form.append(input);
};
// Params is an Array.
if(params instanceof Array){
for(var i=0; i<params.length; i++) {
addParam(i, params[i]);
}
}
// Params is an Associative array or Object.
if(params instanceof Object) {
for(var key in params){
addParam(key, params[key]);
}
}
// Submit the form, then remove it from the page
form.appendTo(document.body);
form.submit();
form.remove();
}
他の人が示唆しているように、私はAjaxの道をたどっていきます
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open("POST", "YourPageHere.asp", true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
self.xmlHttpReq.setRequestHeader("Content-length", QueryString.length);
self.xmlHttpReq.send("?YourQueryString=Value");
最も簡単な方法はAjax Post Requestを使うことです。
$.ajax({
type: "POST",
url: 'http://www.myrestserver.com/api',
data: data,
success: success,
dataType: dataType
});
ここで、
- データはオブジェクトです
- dataTypeはサーバーが期待するデータです（xml、 json、script、text、html）
- urlは、REStサーバーのアドレス、またはHTTP-POSTを受け入れるサーバー側の機能です。
その後、成功ハンドラ内でwindow.locationのようなものでブラウザをリダイレクトします。
Prototype ライブラリには ".toQueryString（）"メソッドを持つHashtableオブジェクトが含まれています。これにより、JavaScriptオブジェクト/構造を簡単にクエリ文字列スタイルの文字列に変換できます。投稿はリクエストの「本体」がクエリ文字列形式の文字列であることを要求するので、これはあなたのAjaxリクエストが投稿として適切に働くことを可能にします。これがPrototypeを使った例です。
$req = new Ajax.Request("http://foo.com/bar.php",{
method: 'post',
parameters: $H({
name: 'Diodeus',
question: 'JavaScript posts a request like a form request',
...
}).toQueryString();
};
これは私の場合は完璧に動作します。
document.getElementById("form1").submit();
あなたは以下のような機能でそれを使うことができます：
function formSubmit() {
document.getElementById("frmUserList").submit();
}
これを使用して、あなたは入力のすべての値を転記することができます。
私のソリューションは、@ RakeshPaiによって現在受け入れられているソリューションとは異なり、深くネストされたオブジェクトをエンコードします。
それは入れ子になったオブジェクトをパラメータに変換するために 'qs' npmライブラリとそのstringify関数を使います。
このコードはRailsのバックエンドでうまく動作しますが、stringifyに渡されるオプションを変更することによって必要なバックエンドで動作するようにそれを変更できるはずです。 RailsではarrayFormatを "大括弧"に設定する必要があります。
import qs from "qs"
function normalPost(url, params) {
var form = document.createElement("form");
form.setAttribute("method", "POST");
form.setAttribute("action", url);
const keyValues = qs
.stringify(params, { arrayFormat: "brackets", encode: false })
.split("&")
.map(field => field.split("="));
keyValues.forEach(field => {
var key = field[0];
var value = field[1];
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", value);
form.appendChild(hiddenField);
});
document.body.appendChild(form);
form.submit();
}
例：
normalPost("/people/new", {
people: [
{
name: "Chris",
address: "My address",
dogs: ["Jordan", "Elephant Man", "Chicken Face"],
information: { age: 10, height: "3 meters" }
},
{
name: "Andrew",
address: "Underworld",
dogs: ["Doug", "Elf", "Orange"]
},
{
name: "Julian",
address: "In a hole",
dogs: ["Please", "Help"]
}
]
});
これらのRailsパラメータを生成します。
{"authenticity_token"=>"...",
"people"=>
[{"name"=>"Chris", "address"=>"My address", "dogs"=>["Jordan", "Elephant Man", "Chicken Face"], "information"=>{"age"=>"10", "height"=>"3 meters"}},
{"name"=>"Andrew", "address"=>"Underworld", "dogs"=>["Doug", "Elf", "Orange"]},
{"name"=>"Julian", "address"=>"In a hole", "dogs"=>["Please", "Help"]}]}
他のいくつかは壊れているように見えるので、まだ別の recursive 解決策（私はそれらすべてをテストしたわけではありません）これは lodash 3.x およびES6に依存します（jQueryは必要ありません）。
function createHiddenInput(name, value) {
let input = document.createElement('input');
input.setAttribute('type','hidden');
input.setAttribute('name',name);
input.setAttribute('value',value);
return input;
}
function appendInput(form, name, value) {
if(_.isArray(value)) {
_.each(value, (v,i) => {
appendInput(form, `${name}[${i}]`, v);
});
} else if(_.isObject(value)) {
_.forOwn(value, (v,p) => {
appendInput(form, `${name}[${p}]`, v);
});
} else {
form.appendChild(createHiddenInput(name, value));
}
}
function postToUrl(url, data) {
let form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', url);
_.forOwn(data, (value, name) => {
appendInput(form, name, value);
});
form.submit();
}
DHTMLを使用して動的にフォームを追加してから送信することができます。
JQueryのようなライブラリとその $ .postメソッド を使うことができます。
私はdocument.formsというJavaを使い、それをループさせてフォーム内のすべての要素を取得してから、xhttpを通して送信します。それで、これはjavascript/ajax送信のための私の解決策です（例としてすべてのhtmlを含む）：
<!DOCTYPE html>
<html>
<body>
<form>
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
Addr1: <input type="text" name="add" value="123 Pond Dr"><br>
City: <input type="text" name="city" value="Duckopolis"><br>
</form>
<button onclick="smc()">Submit</button>
<script>
function smc() {
var http = new XMLHttpRequest();
var url = "yourphpfile.php";
var x = document.forms[0];
var xstr = "";
var ta ="";
var tb ="";
var i;
for (i = 0; i < x.length; i++) {
if (i==0){ta = x.elements[i].name+"="+ x.elements[i].value;}else{
tb = tb+"&"+ x.elements[i].name +"=" + x.elements[i].value;
} }
xstr = ta+tb;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
// do whatever you want to with the html output response here
}
}
http.send(xstr);
}
</script>
</body>
</html>
これはjQueryを使ったbeauSDのコードに基づいています。それは改良されているので、それはオブジェクトに対して再帰的に働きます。
function post(url, params, urlEncoded, newWindow) {
var form = $('<form />').hide();
form.attr('action', url)
.attr('method', 'POST')
.attr('enctype', urlEncoded ? 'application/x-www-form-urlencoded' : 'multipart/form-data');
if(newWindow) form.attr('target', '_blank');
function addParam(name, value, parent) {
var fullname = (parent.length > 0 ? (parent + '[' + name + ']') : name);
if(value instanceof Object) {
for(var i in value) {
addParam(i, value[i], fullname);
}
}
else $('<input type="hidden" />').attr({name: fullname, value: value}).appendTo(form);
};
addParam('', params, '');
$('body').append(form);
form.submit();
}
これはAlanの選択肢2（上記）のようなものです。どのようにhttpobjをインスタンス化するかは、練習問題として残されています。
httpobj.open("POST", url, true);
httpobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
httpobj.onreadystatechange=handler;
httpobj.send(post);
FormObject はオプションです。しかし、FormObjectは現在ほとんどのブラウザでサポートされていません。
ユーザーを自動的に別のページに投稿して別のページに誘導するために使用する方法は、非表示のフォームを作成してからそれを自動送信することです。隠しフォームは、Webページ上のスペースをまったくとらないことを確認してください。コードは次のようになります。
<form name="form1" method="post" action="somepage.php">
<input name="fielda" type="text" id="fielda" type="hidden">
<textarea name="fieldb" id="fieldb" cols="" rows="" style="display:none"></textarea>
</form>
document.getElementById('fielda').value="some text for field a";
document.getElementById('fieldb').innerHTML="some text for multiline fieldb";
form1.submit();
自動送信の適用
自動送信を適用すると、ユーザーが他のページに自動的に入力したフォーム値がそのページに戻されます。そのようなアプリケーションは次のようになります。
fieldapost=<?php echo $_post['fielda'];>
if (fieldapost !="") {
document.write("<form name='form1' method='post' action='previouspage.php'>
<input name='fielda' type='text' id='fielda' type='hidden'>
</form>");
document.getElementById('fielda').value=fieldapost;
form1.submit();
}
これが私のやり方です。
function redirectWithPost(url, data){
var form = document.createElement('form');
form.method = 'POST';
form.action = url;
for(var key in data){
var input = document.createElement('input');
input.name = key;
input.value = data[key];
input.type = 'hidden';
form.appendChild(input)
}
document.body.appendChild(form);
form.submit();
}
POSTまたはGETでリダイレクトするためのjQueryプラグイン
https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js
テストするには、上記の.jsファイルを含めるか、クラスをコピーしてコードに貼り付けてから、ここでコードを使用して、「args」を変数名に、「values」をそれぞれの変数の値に置き換えます。
$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});
ボタンを押すのと同じように、フォームを送信するjQueryトリガーメソッドを使用できます。
$('form').trigger('submit')
ブラウザに送信されます。