jQuery post（）リクエストを作成する方法

Webアプリを構築する場合、ユーザーが入力したデータから何かを作成する必要があることは避けられません。これは、誰かがサインアップフォームを介して情報を送信したときに新しいユーザーアカウントを作成したり、すばらしい新しいレシピオーガナイザーアプリから新しいレシピを作成したりする可能性があります。フォーム内のユーザーデータからデータベースに保存されたレシピの新しいインスタンスに移動するには、HTTP POSTが必要です。 リクエスト。

POSTリクエストは、フォームからサーバーにデータを送信するものであり、バックエンドまたはAPIで作成して、データベースに保存できます。デフォルトでは、フォームを送信するにはリダイレクトまたはページの更新が必要です。これは小さなアプリにはまったく問題ありませんが、より高速な読み込みエクスペリエンスを提供したいので、この動作をオーバーライドします

jQueryのpost()の使用 requestを使用すると、HTTPリクエストを作成し、応答を取得して、リダイレクトや更新なしですべてのデータを表示する方法を選択できます。 post() についてもう少し詳しく見てみましょう。 このすべてを行うために必要です。

post（）の詳細

HTTPリクエストは、キャッチゲームのようなものです。ブラウザはAPIエンドポイントを介してサーバーにリクエストをスローし、サーバーはレスポンスをスローバックします。 post（）が行うことは、アプリのデータベースに作成および保存されるエンドポイントにデータを送信することです。

上記のすべてを考慮に入れると、post() を想定できます。 いくつかの議論がありますよね？右！ post() 最大4つの引数を取りますが、ここでは、URLの宛先とその宛先に送信するデータの2つに焦点を当てています。

$.post(‘/recipes’, data) 


レシピ整理アプリを例にとると、jQueryから始めます。 セレクター$。 post() を呼び出すことによって メソッドでは、データを‘/recipes.’のURLに送信しています。 ここまでは順調ですね。サーバーにいくつかのデータをスローしました。これで、応答をキャッチする準備が整いました。

応答として返されるのは、 jQuery XHR と呼ばれるものです。 オブジェクト、またはjqXHR 、Promiseインターフェースを実装します。心配無用！その最後の文は恐ろしいように聞こえるかもしれませんが、それは応答が単なるオブジェクトであることを示しています。 jQueryの便利なdone()を使用 メソッドでは、そのオブジェクトをより読みやすい形式に編成できます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

キャッチアナロジーのゲームを維持しながら、post() を使用してサーバーにデータをスローします 。 jqXHRが返されます done() に渡すオブジェクト 何を捕まえたかがわかります。これで、post() を詳しく調べました。 、使い方を見てみましょう。

jQuery post（）

まず、プレーンなHTMLフォームがあります：

script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<h2>
  New Recipe
</h2>
<form id='new-recipe'>
<label for="name">Recipe Name</label><br>
<input type="text" name="name" id="name"><br>
<label for="ingredients">Ingredients</label><br>
<input type="text" name="ingredients" id="ingredients"><br>
<button type="submit">
Create Recipe 
</button>
</form>

フォームをそのように表示します：

デフォルトでは、submit ボタンをクリックすると、ブラウザが更新またはリダイレクトされます。ページの更新やリダイレクトを避けたいことを覚えていますか？ページが更新またはリダイレクトされると、フォームからすべてのデータが失われます。データのリダイレクトや損失を防ぐために、JavaScriptのpreventDefault() があります。 方法。

<script>
  $(document).ready(() => {
    $('#new-recipe').submit((event) => {
      event.preventDefault();
    })
  })

</script>

ページまたはdocumentまでお待ちしております ロードしてからリッスンし、送信ボタンがnew-recipe.のIDを持つフォームをクリックします。 これは、.submit()を使用して実行されます クリックイベントを引数としてコールバック関数を受け取るメソッド。確認すると、JavaScriptコールバック関数は、後で実行する別の関数に引数として渡すことができる関数です。

このコールバック関数の内部から、preventDefault() を使用してデフォルトのリダイレクトを停止できます。 。これで、リダイレクトがなくなり、サーバーへのデータの送信を開始できます。

post() を呼び出す前に データを送信するには、データが必要です。このデータはどこから取得しますか？

フォームからデータを取得します。リダイレクトしなくなったため、フォームのテキスト入力の値にアクセスできます。そのserialize()で何が起こっているのか 方法？

serialize() thisで選択したフォームでメソッドが呼び出されます キーワード。 serialize() とは フォームデータを標準のURLエンコード表記のテキスト文字列に変換し、サーバーに送信できます。

フォームデータを適切にシリアル化したら、それを変数に格納します。

  $(document).ready(() => {
    $('#new-recipe').submit((event) => {
      event.preventDefault();
     var values = $(this).serialize();
    })
  })

これで、データがvalues変数に格納されたので、サーバーに送信できます。

  $(document).ready(() => {
    $('#new-recipe').submit((event) => {
      event.preventDefault();
     var values = $(this).serialize();
     var posting = $.post('/recipes', values);
    })
  })

post() であることを忘れないでください jqXHRを返します 物体？これを変数として保存して、done() を呼び出すこともできます。 応答を解凍し、クライアント側で選択したとおりに処理します。

$(document).ready(() => {
    $('#new-recipe').submit((e) => {
      e.preventDefault();
      var values = $(this).serialize();
      var posting = $.post('/recipes', values);
      posting.done( (data) => {
        var recipe = data;
        $('.recipes').text(recipe["name"]);
        $('.recipes').text(recipe["ingredients"]);
      })
    })
  })

データを受信して​​recipeのより読みやすい変数に保存した後 、名前と材料の属性にアクセスできます。例として、これらの属性を<div>に挿入しました。 recipesのクラスで 。

結論

ここでは多くのことをカバーしました。 post（）について学ぶことを祝う前に、私たちが学んだことを簡単に要約しましょう。

post() の一般的な使用法 .submit()の内部にあります コールバック関数として。 .submit()以降 フォーム自体で呼び出される場合は、JavaScriptのthisを使用できます フォーム内のすべてのデータを参照するキーワードとserialize() それ。シリアル化されたデータを変数（値と呼ばれることもあります）に格納した後、post() を使用してこれらの値を宛先URLに送信できます。 。

jqXHRを保存するのは良い習慣です post() によって返されるオブジェクト 一般にpostingと呼ばれる変数内 。ここから、handy done()を使用します 投稿変数のメソッド。これで、サーバーが応答したデータにアクセスできるようになりました。データをユーザーに表示する方法はあなた次第です。

post() の複雑なプロセスに取り組んだことを祝福してください。 ！独自のアプリを作成するこの段階にいる場合は、エラーが発生することを忘れないでください。落ち着いてデバッグしてください！