jQuery 「Ajax」HTTPリクエストを送信し、受け取ったレスポンスをDOMに挿入する

HTTPサーバにリクエストを送信し、レスポンスで得たデータをDOM要素に挿入します。第1引数は「URL」として、リクエストの送信先のURLを指定します。第2引数「データ」には、サーバに送信するデータをオブジェクト（連想配列）で記述します。このデータは「?param1=hello&param2=world」のように整形され、サーバに渡されます。また、jQuery1.3以降「?param1=hello&param2=world」のような文字列をそのまま渡すことも可能になりました。第3引数「コールバック」には、リクエストの成功時に実行されるコールバック関数を指定します。コールバック関数の引数は、

データ・・・レスポンスデータ
テキストステータス・・・通信の結果を表す文字列
jqXHR・・・jqXHRオブジェクト

となります。なお、第2引数以降は省略することも可能です。第2引数のデータがオブジェクトとして渡された場合、サーバとの通信はPOSTメソッドで行われます。それ以外の場合は、GETメソッドになります。

サンプル

DOM要素にサーバから取得したデータを挿入する

<body>
    <div class="main">
      <div class="header">
        <h1>サンプル</h1>
      </div>
      <div class="content">
        <form>
          <br>
          姓<br><input class="form-input" type="text" name="lastname"><br> 
          名<br><input class="form-input" type="text" name="firstname"><br> 
          メールアドレス<br><input class="form-input" type="text" name="email"><br>
          電話番号<br>
          <input class="form-input" type="text" name="phone"><br>
          職業 <br>
          <select multiple class="form-input" name="job">
            <option value="">-------</option>
            <option value="employee">会社員</option>
            <option value="self-employed">自営業</option>
            <option value="student">学生</option>
            <option value="homemaker">主婦・主夫</option>
          </select><br>
          <button class="button" type="submit" name="submit">送信</button>
        </form>
        <div class="desc"></div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxxx all rights reserved.</p>
      </div>
    </div>
    <script>
    $(document).ready(function(){
      $('.button').on('click', function() {
        var param = new Object();
        param.lastname = $('input[name=lastname]').val();
        param.firstname = $('input[name=firstname]').val();
        $('.desc').load(
          'sample11-2.php',
          param,
          function(data, textStatus, jqxhr){
            console.log(jqxhr);
          }
        );
      });
    });
    </script>
    </body>

sample11-2.php

<?php
$lastname = filter_input(INPUT_GET, 'lastname');
$firstname= filter_input(INPUT_GET, 'firstname');
echo htmlspecialchars($lastname . $firstname);

カテゴリー:AjaxJavaScriptjQuery