jQuery 「Ajax」HTTPリクエストを送信してレスポンスを受け取る

$.get()はGETメソッド、$.post()はPOSTメソッドで、Webサーバにリクエストを送信し、レスポンスを受け取ります。引数は共通です。

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

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

となります。
第4引数「データタイプ」は、サーバから返されると予測されるデータ形式に応じて、”xml”,”html”,”script”,”json”,”jsonp”,”text”のいずれかを指定します。
なお、第2引数以降は省略することも可能です。これらのメソッドは$.ajax()メソッドの短縮形ですが、Promiseインタフェースによって、.get()メソッド、.post()メソッドのような短縮されたメソッドでも.done(),.fail(),.always()チェーンが使えるようになりました。なおjQuery3.0で.success(),.error(),.complete()は廃止されていますので、それぞれ.done()fail(),always()で置き換えてく
ださい。

var jqxhr = $.get('test.php', function(data){
  $('.result').html(data);
})
.done(function(){
})
.fail(function(){
})
.always(function(){
});

var jqxhr = $.post('test.html',{param1: "hello", param2:"world"},
function(data){
  $('.result').html(data);
})
.done(function(){
})
.fail(function(){
})
.always(function(){
});

書式

$.get(URL,[データ],[コールバック（データ,テキストステータス,jqXHR）])
$.post(URL,[データ],[コールバック（データ,テキストステータス,jqXHR）],[データタイプ])

$.get('test.php', function(data){
  $('.result').html(data);
});
$.post('test.html', {param1: "hello",param2:"world"},
function(data){
  $('.result').html(data);
});

サンプル

HTTPサーバとGETメソッドで通信する

<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();

        $.get(
          'sample11-1.php',
          param,
          function(data, textStatus, jqxhr){
            console.log(jqxhr);
            $('.desc').html('姓名は'+data+'です');
          }
        );
      });
    });
    </script>
    </body>

sample11-1.php

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

カテゴリー:AjaxJavaScriptjQuery