HTMLからPOSTリクエストパラメータを読み取ろうとしています。JavaScriptで次のコードを使用して、getリクエストパラメータを読み取ることができます。
$wnd.location.search
ただし、POSTリクエストでは機能しません。JavaScriptを使用してHTMLのPOSTリクエストパラメータ値を読み取る方法を教えてもらえますか?
回答:
POSTデータは、サーバー側で処理されるデータです。そして、Javascriptはクライアント側にあります。したがって、JavaScriptを使用して投稿データを読み取る方法はありません。
サーバーにJavaScript変数を設定させるためのPHPの小さな部分は、すばやく簡単です。
var my_javascript_variable = <?php echo json_encode($_POST['my_post'] ?? null) ?>;
次に、通常の方法でJavaScript変数にアクセスします。
チェックしない限り、特定のデータまたはデータの種類が投稿される保証はないことに注意してください。すべての入力フィールドは提案であり、保証ではありません。
JavaScriptはクライアント側のスクリプト言語です。つまり、すべてのコードがWebユーザーのマシンで実行されます。一方、POST変数はサーバーに移動し、そこに常駐します。ブラウザはこれらの変数をJavaScript環境に提供しません。また、開発者はそれらが魔法のように存在することを期待するべきではありません。
ブラウザはJavaScriptによるPOSTデータへのアクセスを禁止しているため、PHPなどの外部アクターがPOST値をスクリプト変数または転送中にPOST値をキャプチャする拡張機能/アドオンにエコーしない限り、POST変数を読み取ることはほとんど不可能です。GET変数は、クライアントマシンで解析できるURLにあるため、回避策を介して使用できます。
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
form.on('submit',function(){document.sessionStorage["form-data"] = $('this').serialize();window.location.href = 'another-page.html';})
samesite = NoneそしてSecureそのクロムはそれの使用を可能にします。
localStorageやその他の方法を使用して、渡したい値を設定してみませんか?
そうすれば、どこからでもアクセスできます。
どこでも私が意味する特定のドメイン/コンテキスト内
cloudianos.comは到達api.cloudianos.comしませんlocalStorage。
jQuery-PostCapture(@ ssut / jQuery-PostCapture)を使用してリクエスト後のパラメーターを読み取ることができます。
PostCaptureプラグインは、いくつかのトリックで構成されています。
送信ボタンをクリックすると、onsubmitイベントがディスパッチされます。
その時点で、PostCaptureはフォームデータをシリアル化し、html5 localStorage(利用可能な場合)またはCookieストレージに保存します。
POSTは、ブラウザがクライアント(ブラウザ)からWebサーバーに送信するものです。投稿データはhttpヘッダーを介してサーバーに送信され、サーバー側、またはクライアント(ブラウザー)からWebサーバーへのパス(例:プロキシサーバー)の間でのみ使用できます。そのため、JavaScriptのようなクライアント側のスクリプトからは処理できません。CGI、PHP、Javaなどのサーバーサイドスクリプトを介して処理する必要があります。それでもJavaScriptで記述する必要がある場合は、Node.jsなどのサーバーでJavaScriptを理解して実行するWebサーバーが必要です。
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>
<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データとすぐにやり取りできます。
私はそれを作るための簡単なコードを持っています:
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を含めると、投稿データを含む非表示の入力の値を取得できます。
'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>
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の変数から値にアクセスできます。
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;など...
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");
$(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>
<head><script>var xxx = ${params.xxx}</script></head>
EL式$ {param.xxx}を使用<head>してpostメソッドからparamsを取得し、その後にjsファイルが含まれ<head>ていることを確認して、jsファイルで「xxx」のようなparamを直接処理できるようにします。