web-dev-qa-db-ja.com

jQueryを使用して、投稿前にPOST varsを変更

フォームとjQueryの送信ハンドラーがあります。

ユーザーがフォームを送信するとき、クライアントからサーバーに送信される前に、POSTリクエストにいくつかのパラメーターを変更（追加）したいです。

つまり.

  1. ユーザーが「送信」をクリックします
  2. JQuery送信ハンドラーが実行を開始します...
  3. いくつかの新しいキー/値のペアを作成し、POSTペイロードに追加します

現時点では、私の唯一のオプションは$.post()または$('form').append('<input type="hidden" name=... value=...');を使用することです

助けてくれてありがとう。

編集：送信ハンドラーをフォームに既に添付しました。ユーザーが送信ボタンをクリックしてからリクエストがサーバーに送信されるまでの間、post変数を編集しようとしています。

jqueryformspost
40
aidan

フォームでsubmit()関数を使用して、コールバックを作成します。関数がtrueを返す場合、フォームが送信されます。 falseの場合、フォームは投稿しません。

$('#theForm').submit(function() {
    $("#field1").val(newValue1);
    $("#field2").val(newValue2);
    $(this).append(newFormField);
    return true;
});

等.

43
keithjgrant

高レベルビュー：
フォームがネイティブに送信されると、それはブラウザが実行する最後の操作であり、レンダリングエンジン/ javascriptインタープリターのスコープ外で実行されます。

実際のPOSTまたはGETリクエストをJavaScriptでインターセプトすることはできません。この従来のWebリクエストはブラウザエンジンとネットワークサブシステム間でのみ発生するためです。

最新のソリューション：
XML開発者は、XMLインタプリタがブラウザネットワーキングサブシステムにアクセスできるようにするWebブラウザAPIであるXMLHttpRequestを使用してフォームデータを送信することが一般的になってきています。
This is commonly referred to as Ajax

これの単純だが一般的な使用法は次のようになります。

<html>
  <form id="myForm" onsubmit="processForm()">
   <input type="text" name="first_name"/>
   <input type="text" name="last_name"/>
   <input type="submit" value="Submit">
  </form>

  <!--Using jQuery and Ajax-->
  <script type="text/javascript">
    /**
     * Function is responsible for gathering the form input data, 
     * adding additional values to the list, and POSTing it to the
     * server via Ajax.
     */
    function processForm() {
      //Retreive the data from the form:
      var data = $('#myForm').serializeArray();

      //Add in additional data to the original form data:
      data.Push(
        {name: 'age',      value: 25},
        {name: 'sex',      value: 'M'},
        {name: 'weight',   value: 200}
      );

      //Submit the form via Ajax POST request:
      $.ajax({
        type: 'POST',
        url:  'myFormProcessor.php',
        data:  data,
        dataType: 'json'
      }).done(function(data) {
        //The code below is executed asynchronously, 
        //meaning that it does not execute until the
        //Ajax request has finished, and the response has been loaded.
        //This code may, and probably will, load *after* any code that
        //that is defined outside of it.
        alert("Thanks for the submission!");
        console.log("Response Data" +data); //Log the server response to console
      });
      alert("Does this alert appear first or second?");
    }
  </script>
</html>

ネイティブアプローチ： XMLHttpRequestが存在する前の1つの解決策は、追加のフォームデータをドキュメントに直接追加することです。

上記と同じフォームを投稿すると、jQuery appendメソッドは次のようになります。

<html>
  <form action="myFormProcessor.php" method="POST" id="myForm" onsubmit="return processForm()">
    <input type="text" name="first_name"/>
    <input type="text" name="last_name"/>
    <input type="submit" value="Submit">
  </form>

 <script type="text/javascript">
  /**
   * Function is responsible for adding in additional POST values
   * by appending <input> nodes directly into the form.
   * @return bool - Returns true upon completion to submit the form
   */
  function processForm() {
    $('<input>').attr('type', 'hidden').attr('name', 'age').attr('value', 25).appendTo('#myForm');
    $('<input>').attr('type', 'hidden').attr('name', 'sex').attr('value', 'M').appendTo('#myForm');
    $('<input>').attr('type', 'hidden').attr('name', 'weight').attr('value', 200).appendTo('#myForm');

    return true; //Submit the form now 
    //Alternatively you can return false to NOT submit the form.
  }
 </script>
</html>
19
user1893702

POST varsをそのように変更できるとは思いません。送信ハンドラが実行されると、追加または変更できる実際に存在するフォームデータのハッシュはありません。 re right-$ .post（）を自分で選択する（推奨）か、フォームに非表示の入力を追加する（DOM変更のオーバーヘッドがあり、実際には必要ありません）唯一のオプションです。

3
boycy

私はこの質問に1日取り組んでおり、良い解決策を思い付きます：

jquery .clone（）を使用して、送信するフォームのコピーを作成できます。次に、コピーに対して変更を行い、最終的にコピーを送信できます。

2
Hao XU

送信ボタンのクリックイベントをフックして、そこで処理を行うことができます。キー/値のペアでは、非表示のフォーム要素を試すことができます。

0
Jay