JavaScriptを使用してPOSTリクエストパラメータを読み取る方法


92

HTMLからPOSTリクエストパラメータを読み取ろうとしています。JavaScriptで次のコードを使用して、getリクエストパラメータを読み取ることができます。

$wnd.location.search

ただし、POSTリクエストでは機能しません。JavaScriptを使用してHTMLのPOSTリクエストパラメータ値を読み取る方法を教えてもらえますか?

回答:


184

POSTデータは、サーバー側で処理されるデータです。そして、Javascriptはクライアント側にあります。したがって、JavaScriptを使用して投稿データを読み取る方法はありません。


69
結論は正しいですが(javascriptからそのデータを取得することはできません)、推論は間違っています。クライアント(ブラウザ)は、最初にPOSTデータをサーバーに送信するクライアントです。したがって、クライアントはそのデータが何であるかをよく知っています。実際の理由は、ブラウザがそのデータをjavascriptで利用できるようにしないということです(ただし、完全に可能です)。
getFree 2013年

@GetFree:このいわゆるPOST変数の知識はWeb開発者にとってどのようなメリットがありますか?ご指摘のとおり、実際は発生しないため、Web開発者はブラウザを前提としたクライアント側のスクリプトを記述して投稿データをJavaScriptで利用できるようにすることはありません。したがって、現実の世界では、ここに提示された答えは私自身と同様に正しいです。
プラチナアズール2013年

34
@PlatinumAzure、あなたがその要点を理解しているかどうかはわかりません。POSTデータはサーバーに存在し、JavaScriptはクライアントで実行されるため、JSがそのデータにアクセスする方法はありません。それは間違っています。POSTデータはクライアントとサーバーの両方に存在し、JSがそのデータにアクセスできない理由は、単にクライアント(ブラウザー)がJSでデータを利用できるようにしていないためです。それと同じくらい簡単です。
getFree 2013年

13
@PlatinumAzure、はい、何らかの理由でそれを行うことはできません。しかし、その理由を説明する場合は、それが正しい理由であることを確認してください。それが不可能な理由の説明が間違っている、それがポイントです。
getFree 2013年

10
ブラウザーはWebアプリ、ブラウザーで(多くの場合)100%実行されているアプリ(ファイルをホストする以外のサーバーなし)などを取得しているため、より大きなデータのチャンクを受信できるようにする必要があります。クエリ文字列(GETメソッド)のサイズには制限があるため(4Kと考えてください)、JavaScriptからPOSTEDデータのより大きなチャンクを読み取る機能は私見の素晴らしいアイデアです。
netsi1964 2014

26

サーバーにJavaScript変数を設定させるためのPHPの小さな部分は、すばやく簡単です。

var my_javascript_variable = <?php echo json_encode($_POST['my_post'] ?? null) ?>;

次に、通常の方法でJavaScript変数にアクセスします。

チェックしない限り、特定のデータまたはデータの種類が投稿される保証はないことに注意してください。すべての入力フィールドは提案であり、保証ではありません。


12
エスケープ/引用符の追加などに注意してください。このルートを使用すると、POSTデータに移動します。別の方法は、json_encode()を使用することです。これは、ほとんどすべてのデータ型で機能します。例:abeautifulsite.net/passing-data-from-php-to-javascript
claviska

今、これは私が箱から出して考えることと呼ぶものです。
I.Am.A. Guy 2017年

これは確かにこれを行う最も簡単な方法です。これは、新しいテーマページを作成し、window.my_prefix_post_data = <?php echo $ _POST ['my_post']?>;のようにウィンドウレベルで投稿データを公開することで、ワードプレスでうまくいきました。そうすれば、どのスコープからでも簡単に投稿データにアクセスできます。これは、機密性の高い投稿データが常に通過するサイトにはお勧めできませんが、ページ/サイトの範囲ではうまく機能します。
OGショーン

2
これは実行可能ではなく、文字エスケープの問題がある可能性があります。
MathieuAuclair 2018

1
確かに、ハッキングされました。エスケープせずに上記の方法を使用しないでください。
レジー

10

JavaScriptはクライアント側のスクリプト言語です。つまり、すべてのコードがWebユーザーのマシンで実行されます。一方、POST変数はサーバーに移動し、そこに常駐します。ブラウザはこれらの変数をJavaScript環境に提供しません。また、開発者はそれらが魔法のように存在することを期待するべきではありません。

ブラウザはJavaScriptによるPOSTデータへのアクセスを禁止しているため、PHPなどの外部アクターがPOST値をスクリプト変数または転送中にPOST値をキャプチャする拡張機能/アドオンにエコーしない限り、POST変数を読み取ることはほとんど不可能です。GET変数は、クライアントマシンで解析できるURLにあるため、回避策を介して使用できます。


3
私はあなたの-1に強く反対します。OPのどこにも質問でAJAXが指定されていなかったため、JavaScriptで実行されないリンククリックやフォーム送信の可能性が残されています。特に後者は、サーバー応答がスクリプトによって生成され、スクリプトがPOST変数の値をJSコードにエコーすることを選択しない限り、POST変数は存在するが、クライアント側では使用できない例です。私があなたのコメントを-1できれば、私はそうします。
プラチナアズール2013年

2
私はAJAXについて話しているのではありません。私の議論は、あらゆる形式のPOSTリクエストに言及しています。ブラウザは、HTTPリクエストの一部として送信されるすべてのパラメータを認識しています。これには、URLやPOSTパラメータなどが含まれます。これらのパラメーターの一部はJavaScriptで使用可能になり、その他は使用できません。これは単にブラウザによって課せられた制限であり、JSからPOSTパラメータへのアクセスを提供する可能性が非常に高いですが、そうではありません。それは単純な真実です。
getFree 2013年

1
あなたは私の主張を理解していません。サーバーが明示的に提供しない限り、POST変数が使用可能であることを期待してJavaScriptを作成する人は誰もいません。サーバーがそれらを提供しない場合、JavaScriptコードを作成するWeb開発者に関する限り、それらはクライアント側にまったく存在しない可能性があります。
プラチナアズール

1
あなたの答えでは、それは不可能だとあなたは言います、それは正しいです。しかし、それが不可能な理由も説明します。その説明は間違っています。そのため、-1を取得します
GetFree 2013年

3
私の説明は不完全で、間違っていませんでした。あなたも幸せになるように答えを編集しました。そうでない場合は、私に-1を与えてコメントを隠す代わりに、自分で編集してください。
プラチナアズール2013年

9

sessionStorageを使用してください!

$(function(){
    $('form').submit{
       document.sessionStorage["form-data"] =  $('this').serialize();
       document.location.href = 'another-page.html';
    }
});

another-page.htmlで:

var formData = document.sessionStorage["form-data"];

参照リンク-https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage


タイプミス:sumbit。
Alejandro Salamanca Mazuelo 2018

投稿リクエストがサブドメインまたは別のドメインからのものである場合はどうなりますか?構想は崩壊した。
未定義

それはあるべきですform.on('submit',function(){document.sessionStorage["form-data"] = $('this').serialize();window.location.href = 'another-page.html';})
Justin Liu

@ZefirZdravkovあなたはでクッキーを設定することができsamesite = NoneそしてSecureそのクロムはそれの使用を可能にします。
Justin Liu

6

localStorageやその他の方法を使用して、渡したい値を設定してみませんか?

そうすれば、どこからでもアクセスできます。

どこでも私が意味する特定のドメイン/コンテキスト内


2
単純なクッキーではないのはなぜですか?
jj_

1
投稿リクエストがサブドメインまたは別のドメインからのものである場合はどうなりますか?構想は崩壊した。
未定義

@ZefirZdravkov、与えられた制限の存在についてあなたに同意しますが、それはブラウザベースのセキュリティ実装のために存在します。それが「どのサイトも他のコンテンツを読むことができる」シナリオだった場合にのみ、無限の恐怖を想像することができます。
イアン・ムベ

@Ianどのサイトでも、CURLまたはAjaxを介して他のコンテンツを実際に読み取ることができます。「他のサイトのlocalStorage」を参照している場合、そうです、それは忌まわしいことです。私が言っているのは、この回答は、このドメインにのみPOSTリクエストを送受信している場合にのみ機能するということです。たとえば、からのPOSTリクエストは、同じを共有していないため、のJavaScriptにcloudianos.comは到達api.cloudianos.comしませんlocalStorage
未定義

2

jQuery-PostCapture(@ ssut / jQuery-PostCapture)を使用してリクエスト後のパラメーターを読み取ることができます。

PostCaptureプラグインは、いくつかのトリックで構成されています。

送信ボタンをクリックすると、onsubmitイベントがディスパッチされます。

その時点で、PostCaptureはフォームデータをシリアル化し、html5 localStorage(利用可能な場合)またはCookieストレージに保存します。


これは、同じドメイン間の投稿投稿に対してのみ機能します(サブドメインも機能しません)
未定義

1

POSTは、ブラウザがクライアント(ブラウザ)からWebサーバーに送信するものです。投稿データはhttpヘッダーを介してサーバーに送信され、サーバー側、またはクライアント(ブラウザー)からWebサーバーへのパス(例:プロキシサーバー)の間でのみ使用できます。そのため、JavaScriptのようなクライアント側のスクリプトからは処理できません。CGI、PHP、Javaなどのサーバーサイドスクリプトを介して処理する必要があります。それでもJavaScriptで記述する必要がある場合は、Node.jsなどのサーバーでJavaScriptを理解して実行するWebサーバーが必要です。


1

Java / REST APIを使用している場合、回避策は簡単です。JSPページでは、次のことができます。

    <%
    String action = request.getParameter("action");
    String postData = request.getParameter("dataInput");
    %>
    <script>
        var doAction = "<% out.print(action); %>";
        var postData = "<% out.print(postData); %>";
        window.alert(doAction + " " + postData);
    </script>

1
<script>
<?php
if($_POST) { // Check to make sure params have been sent via POST
  foreach($_POST as $field => $value) { // Go through each POST param and output as JavaScript variable
    $val = json_encode($value); // Escape value
    $vars .= "var $field = $val;\n";
  }
  echo "<script>\n$vars</script>\n";
}
?>
</script>

または、それを使用して、関数が取得できる辞書にそれらを配置します。

<script>
<?php
if($_POST) {
  $vars = array();
  foreach($_POST as $field => $value) {
    array_push($vars,"$field:".json_encode($value)); // Push to $vars array so we can just implode() it, escape value
  }
  echo "<script>var post = {".implode(", ",$vars)."}</script>\n"; // Implode array, javascript will interpret as dictionary
}
?>
</script>

次にJavaScriptで:

var myText = post['text'];

// Or use a function instead if you want to do stuff to it first
function Post(variable) {
  // do stuff to variable before returning...
  var thisVar = post[variable];
  return thisVar;
}

これは単なる例であり、どのような目的に使用しないでくださいPOSTメソッドが理由のために存在するなど、パスワードなどの機密データ。データをバックエンドに安全に送信するため、目的が果たせなくなります。

ただし/page?blah=value&bleh=value&blahbleh=value、URLを含まずに次のページに移動するために機密性の低いフォームデータが必要な場合は、URLがよりクリーンになり、JavaScriptがPOSTデータとすぐにやり取りできます。


1

私はそれを作るための簡単なコードを持っています:

index.phpで:

<input id="first_post_data" type="hidden" value="<?= $_POST['first_param']; ?>"/>

main.jsで:

let my_first_post_param = $("#first_post_data").val();

したがって、index.php(<script type="text/javascript" src="./main.js"></script>)にmain.jsを含めると、投稿データを含む非表示の入力の値を取得できます。


0

'json_encode'を使用して、最初にPHPを介して投稿変数をエンコードできます。次に、JSONでエンコードされたPOST変数からJSオブジェクト(配列)を作成します。次に、JavaScriptループを使用してこれらの変数を操作します...次の例のように、HTMLフォームフォームにデータを入力します。

<script>

    <?php $post_vars_json_encode =  json_encode($this->input->post()); ?>

    // SET POST VALUES OBJECT/ARRAY
    var post_value_Arr = <?php echo $post_vars_json_encode; ?>;// creates a JS object with your post variables
    console.log(post_value_Arr);

    // POPULATE FIELDS BASED ON POST VALUES
    for(var key in post_value_Arr){// Loop post variables array

        if(document.getElementById(key)){// Field Exists
            console.log("found post_value_Arr key form field = "+key);
            document.getElementById(key).value = post_value_Arr[key];
        }
    }


</script>

0

1つのオプションは、PHPでCookieを設定することです。

例:1日で期限切れになる値を持つinvalidという名前のCookie $invalid

setcookie('invalid', $invalid, time() + 60 * 60 * 24);

次に、JSで(JS Cookieプラグインを使用して)読み戻します。

var invalid = Cookies.get('invalid');

if(invalid !== undefined) {
    Cookies.remove('invalid');
}

これでinvalid、JavaScriptの変数から値にアクセスできます。


0

JavaScriptとして定義するものによって異なります。現在、NodeJSなどのサーバーサイドプログラムにJSがあります。これは、サーバー言語を除いて、ブラウザーでコーディングするのとまったく同じJavaScriptです。したがって、次のようなことができます:(ケーシーチューによるコード: https //stackoverflow.com/a/4310087/5698805

var qs = require('querystring');

function (request, response) {
    if (request.method == 'POST') {
        var body = '';

        request.on('data', function (data) {
            body += data;

            // Too much POST data, kill the connection!
            // 1e6 === 1 * Math.pow(10, 6) === 1 * 1000000 ~~~ 1MB
            if (body.length > 1e6)
                request.connection.destroy();
        });

        request.on('end', function () {
            var post = qs.parse(body);
            // use post['blah'], etc.
        });
    }
}

そしてそこから使用post['key'] = newVal;など...


-1

POST変数は、同じブラウザーが最初に送信した場合にのみブラウザーで使用できます。別のWebサイトフォームがPOSTを介して別のURLに送信した場合、ブラウザーはPOSTデータが受信されたことを認識しません。

サイトA:POSTを使用して外部URL(サイトB)にフォームを送信するサイトB:訪問者を受け取りますが、GET変数のみを使用します


-1
function getParameterByName(name, url) {
            if (!url) url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
var formObj = document.getElementById("pageID");
formObj.response_order_id.value = getParameterByName("name");

これはGET変数であり、OPは特にPOST変数を要求し、すでにGET変数を簡単に持っていることに注意しました。
OGショーン

-3
$(function(){
    $('form').sumbit{
        $('this').serialize();
    }
});

jQueryでは、上記のコードにより、URLにPOSTパラメーターを含むURL文字列が提供されます。POSTパラメータを抽出することは不可能ではありません。

jQueryを使用するには、jQueryライブラリを含める必要があります。そのために以下を使用してください:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

4
これは、フォームが送信さているページのPOSTパラメータのみを取得します。OPがフォームが送信されたページでPOSTパラメータを取得することを望んでいることは安全な仮定のようです。それは不可能です。
ジョンワシャム2014年

-3

シリアル化の概念を使用して、POSTを使用して送信されたフォームパラメータを収集できます。

これを試して:

$('form').serialize(); 

アラートを囲むだけで、非表示を含むすべてのパラメータが表示されます。


-4
<head><script>var xxx = ${params.xxx}</script></head>

EL式$ {param.xxx}を使用<head>してpostメソッドからparamsを取得し、その後にjsファイルが含まれ<head>ていることを確認して、jsファイルで「xxx」のようなparamを直接処理できるようにします。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.