window.location.hrefで投稿データを渡す


113

window.location.hrefを使用するとき、開いている新しいページにPOSTデータを渡したいのですが。これはJavaScriptとjQueryを使用して可能ですか?


11
設定でwindow.location.hrefは、POSTではなく、新しいURLに対してGETリクエストを行います。
Chetan S

回答:


85

使用するwindow.location.hrefことは、POSTリクエストを送信することはできません。

formデータフィールドを含むタグを設定しaction、フォームのmethod属性をURLに、属性をPOSTに設定submitし、formタグのメソッドを呼び出す必要があります。


3つの異なるフォームからのデータがあり、3つのフォームすべてを同じページに送信しようとしているので、jQueryを使用してフォームをシリアル化し、他の方法で送信しようとしています
Brian

@ブライアン:すべてを1つformにまとめることはできないので、すべてが自動的に一緒に送信されますか?
Marcel Korpel

1つのフォームはjQueryUIダイアログボックスにあります-したがって、すべてを含めることはできません。
ブライアン

12
それらのすべての値を引き出し、3つすべてのフォームのすべてのフィールドを含むフォームを動的に作成し、そのフォームを送信します。フォームは非表示にできます。JQuery AJAXメソッドを使用しないでください$("#myForm").submit()。フォームは表示されず、クライアント側のコードからの値を送信するためにのみ使用され、ユーザー入力は使用されません。フォームは表示も使用もされず、ページが更新されます。
Matt Luongo

79

次のようなフォームをHTMLに追加します。

<form style="display: none" action="/the/url" method="POST" id="form">
  <input type="hidden" id="var1" name="var1" value=""/>
  <input type="hidden" id="var2" name="var2" value=""/>
</form>

JQueryを使用してこれらの値を入力します(もちろん、JavaScriptを使用して同様のことを行うこともできます)

$("#var1").val(value1);
$("#var2").val(value2);

最後にフォームを送信します

$("#form").submit();

サーバー側では、var1とによって送信したデータを取得できるはずvar2です。これを行う方法は、使用しているサーバー側の言語によって異なります。


これを行うと、ブラウザがドメイン/未定義にリダイレクトされます。何が悪いのですか?
vigamage


9

他の回答で述べたように、window.location.hrefを使用してPOSTリクエストを行う方法はありません。これを行うには、フォームを作成してすぐに送信できます。

この関数を使用できます。

function postForm(path, params, method) {
    method = method || 'post';

    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();
}

postForm('mysite.com/form', {arg1: 'value1', arg2: 'value2'});

https://stackoverflow.com/a/133997/2965158


8

短い答え:いいえ。window.location.hrefはPOSTデータを渡すことができません。

やや満足のいく答え:この関数を使用して、すべてのフォームデータを複製して送信できます。

var submitMe = document.createElement("form");
submitMe.action = "YOUR_URL_HERE"; // Remember to change me
submitMe.method = "post";
submitMe.enctype = "multipart/form-data";
var nameJoiner = "_";
// ^ The string used to join form name and input name
//   so that you can differentiate between forms when
//   processing the data server-side.
submitMe.importFields = function(form){
    for(k in form.elements){
        if(input = form.elements[k]){
            if(input.type!="submit"&&
                     (input.nodeName=="INPUT"
                    ||input.nodeName=="TEXTAREA"
                    ||input.nodeName=="BUTTON"
                    ||input.nodeName=="SELECT")
                     ){
                var output = input.cloneNode(true);
                output.name = form.name + nameJoiner + input.name;
                this.appendChild(output);
            }
        }
    }
}
  • やるsubmitMe.importFields(form_element);あなたが提出したい3つの形態の各々のために。
  • この関数は、各フォームの名前をその子入力の名前に追加します(<input name="email">in がある場合<form name="login">、送信される名前はになりますlogin_name
  • nameJoiner変数を他の変数に変更_して、入力の命名規則と競合しないようにすることができます。
  • 必要なフォームをすべてインポートしたら、次のようにします。 submitMe.submit();

4

それはこれと同じくらい簡単です

$.post({url: "som_page.php", 
    date: { data1: value1, data2: value2 }
    ).done(function( data ) { 
        $( "body" ).html(data);
    });
});

ユーザーとして機密データを渡さなければならないアプリケーションと彼が働いていたURLを渡さなければならないアプリケーションの画面ロックを作成するには、これを解決する必要がありました。次に、このコードを実行する関数を作成します


1
またはdone()関数セットwindow.location.href
Chris Edwards

はい@ChrisEdwards、私の例では、jqueryポストからの戻りデータを使用しようとしています。誰かのお役に立てれば幸いです。
セルジオロルダン

3

単にローカル/セッションストレージの使用を検討しましたか?-または-構築しているものの複雑さによって異なります。indexDBを使用することもできます。

Local storageおよびindexDB安全ではありません-したがって、これらのいずれかに機密/個人データ(つまり、名前、住所、電子メールアドレス、DOBなど)を保存しないようにします。

Session Storage 機密性の高いものに対してはより安全なオプションです。アイテムを設定したオリジンにのみアクセスでき、ブラウザ/タブが閉じられるとすぐにクリアされます。

IndexDB少し複雑30MB noSQL databaseですが(すべてではありません)、すべてのブラウザーに組み込まれています(ただし、ユーザーがオプトインすると、基本的に無制限になります)->次にGoogleドキュメントを使用するときに、DevToolsを開きます->アプリケーション-> IndexDBそしてピークを取る。[ネタバレ注意:暗号化されています]。

中心にLocalしてSession Storage、これらはどちらも非常に簡単に使用できます。

// To Set 
sessionStorage.setItem( 'key' , 'value' );

// e.g.
sessionStorage.setItem( 'formData' , { name: "Mr Manager", company: "Bluth's Frozen Bananas", ...  } );    

// Get The Data 
const fromData = sessionStorage.getItem( 'key' );     

// e.g. (after navigating to next location)
const fromData = sessionStorage.getItem( 'formData' );

// Remove 
sessionStorage.removeItem( 'key' );

// Remove _all_ saved data sessionStorage
sessionStorage.clear( ); 

単純ではない場合-または- オフロード行って、別のアプローチをすべて一緒に試したい場合->たぶんshared web worker...キックのためだけに使用できます。


-4

パスの代わりにGETを使用できますが、重要な値にはこのメソッドを使用しないでください。

function passIDto(IDval){    
window.location.href = "CustomerBasket.php?oridd=" +  IDval ;
}   

CustomerBasket.php

<?php
  $value = $_GET["oridd"];
  echo  $value;
?>

3
そのGETメソッドですが、質問はPOSTメソッドのバディです
Thamaraiselvam 2015

@thamaraiselvam Kissa Miaは答えをうまく言い表していないかもしれませんが、ここのGETルートについては正しいです。質問はPOSTメソッドの使用に固定されていません。ユーザーは、POSTデータを取得してwindow.location.href経由で送信する方法があるかどうかをユーザーが尋ねただけです。そして、あなたは最初Window.location.hrefがいることを知るべきであるIS GETリクエスト。この答えは間違いではありません-QueryStringとしてエンコードされた多数のフォームフィールドにスケーリングするのは簡単ではありません。ただし、URLを介してデータを送信する最もわかりやすい方法(これはwindow.location.hrefで変更できます)は、クエリ文字列パラメーターを使用する方法です。
SylonZero 2017

@SylonZero POSTデータをGETリクエストに添付することはできません。これらはさまざまな種類のリクエストであり、データはPOSTで異なって見えます。HTTP仕様の重要な部分はかなり短いです。
Colin vH 2017

@ColinvH私が書いたものをもっと注意深く読む必要があります。TLDRバージョン:POSTの生成に使用されるデータを取得し、それをクエリ文字列パラメーターとしてエンコードできます。
SylonZero 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.