ホームページ > ウェブフロントエンド > フロントエンドQ&A > PHPにJavaScriptの値を割り当てる方法

PHPにJavaScriptの値を割り当てる方法

王林
リリース: 2023-05-16 11:39:37
オリジナル
1712 人が閲覧しました

フロントエンド技術の発展に伴い、JavaScript の使用範囲はますます広がっています。 Web アプリケーションでは、処理のためにフロントエンド ページからバックエンド PHP にいくつかの値を渡す必要があることがよくありますが、これには JavaScript 値と PHP の間の転送の問題が伴います。この記事では、JavaScript の値を PHP に割り当てるいくつかの方法を紹介します。

1. フォーム送信を使用する

JavaScript 値を PHP に渡す最も一般的な方法は、フォーム送信を使用することです。 JavaScript では、DOM 操作を通じてフォーム要素の値を取得し、これらの値を非表示の入力要素に割り当て、最後にフォームをバックエンド PHP に送信して処理することができます。サンプルコードは次のとおりです:

<form action="handle.php" method="post">
  <input type="hidden" name="username" id="username">
  <input type="hidden" name="age" id="age">
  <button type="submit" onclick="submitForm()">提交</button>
</form>

<script>
  function submitForm() {
    var username = document.getElementById("username").value;
    var age = document.getElementById("age").value;
    document.getElementById("username").value = username;
    document.getElementById("age").value = age;
  }
</script>
ログイン後にコピー

この例では、2 つの非表示の入力要素を含むフォームを定義します。これら 2 つの要素の値は、JavaScript で取得したユーザー名と年齢の値です。送信ボタンがクリックされると、submitForm() 関数が呼び出され、取得された値が 2 つの非表示要素に割り当てられ、その後、フォームが処理のためにバックエンド PHP に送信されます。

フォームによって渡された値を処理する場合、PHP で $_POST 配列を使用してこれらの値を取得できます。サンプル コードは次のとおりです。

$username = $_POST['username'];
$age = $_POST['age'];
ログイン後にコピー
ログイン後にコピー

2. AJAX テクノロジを使用する

フォーム送信を通じて JavaScript 値を渡すことに加えて、もう 1 つの一般的な方法は、AJAX テクノロジを使用することです。 AJAX は、ページを更新せずにバックエンド PHP にリクエストを送信できるため、JavaScript の値を処理のために PHP に渡すことができます。サンプル コードは次のとおりです。

<script>
  var username = '张三';
  var age = 18;

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'handle.php', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status == 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send('username=' + username + '&age=' + age);
</script>
ログイン後にコピー

この例では、ユーザー名と年齢という 2 つの変数を含む JavaScript オブジェクトを定義します。次に、XMLHttpRequest オブジェクトが作成され、リクエストのタイプとアドレスが open() メソッドを通じて指定されます。 Content-type は、リクエスト ヘッダーの application/x-www-form-urlencoded に設定されています。これは、POST メソッドを使用してリクエストをバックエンド PHP に送信し、データをリクエスト本文。最後に、send() メソッドを使用して、処理のためにデータをバックエンド PHP に送信します。

PHP では、$_POST 配列を通じてこれらの値を取得できます。サンプル コードは次のとおりです:

$username = $_POST['username'];
$age = $_POST['age'];
ログイン後にコピー
ログイン後にコピー

3. Cookie を使用して渡す

フォーム送信と AJAX テクノロジに加えて、Cookie を使用して JavaScript 値を渡すこともできます。 Cookie は、クライアント側にデータを保存し、フロントエンドとバックエンドの間でデータを受け渡すためのメカニズムです。サンプル コードは次のとおりです。

<script>
  var username = '张三';
  var age = 18;

  document.cookie = 'username=' + username;
  document.cookie = 'age=' + age;
</script>
ログイン後にコピー

この例では、JavaScript の document.cookie 属性を使用して Cookie 値を設定します。 Cookie を設定するには、値と名前を等号で接続し、セミコロンとスペースを使用して複数のキーと値のペアを区切ります。この例では、ユーザー名と年齢の値を Cookie の値として設定します。

PHP では、$_COOKIE 配列を使用してこれらの値を取得できます。サンプル コードは次のとおりです。

$username = $_COOKIE['username'];
$age = $_COOKIE['age'];
ログイン後にコピー

Cookie を使用して値を転送する場合、フロント エンドとバック エンドの間で Cookie が正しく転送できることを確認する必要があることに注意してください。特に、複数のリクエストをまたぐ場合、セキュリティ上の問題が発生する可能性があるため、Cookie 配信のセキュリティを確保するには、HttpOnly などの Cookie 属性を使用する必要があります。

概要:

この記事では、JavaScript 値を PHP に割り当てる 3 つの方法 (フォーム送信、AJAX テクノロジ、および Cookie 配信) を紹介します。実際の開発では、さまざまなニーズに応じて、データ転送にさまざまな方法を選択して、フロントエンドとバックエンドのデータ対話を実現できます。

以上がPHPにJavaScriptの値を割り当てる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート