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

$.get()や$.post()など、jQueryの短縮形Ajaxメソッドの大本になるのが、この$.ajax()メソッドです。引数には、通信先のURLと、各設定パラメータを「名前：キー」のペアでオブジェクトとして指定します。または、URLも設定パラメータのひとつに「url：値」として含めることも可能です。もちろん、設定パラメータは必要なものだけ記述し、不要なものは省略できます。省略したパラメータに関しては、既定値が指定されたものとみなされます。jQuery1.5以降、$.ajax()メソッドはjqXHRオブジェクトを返すようになりました。jqXHRオブジェクトはPromiseに対応しているので、.done().fail()..always()の各メソッドを使ってAjax処理を一元に記述できるようになっています。また、jQuery1.5.1では、jqXHRオブジェクトに一時jQuery1.5で廃止されていた.overrideMimeType()メソッドが再度追加されました。AjaxではサーバからのレスポンスをUTF-8エンコーディングで受け取ろうとするため、サーバーから返されるファイルやデータが例えばShiftJISエンコーディングの場合などは文字化けなどの不具合が発生します。これは、.overrideMimeType()メソッドをbeforeSendに指定したコールバック関数で実行することで回避できます。

 <script>
    $(document).ready(function(){
      $('.button').on('click', function() {
        $.ajax({
          url:"test.csv",
          dataType: 'text',
          beforeSend: function( xhr ){
            xhr.overrideMimeType("text/html; charset=Shift_JIS");
          }
        })
        .done(function( data ){
          $('.desc').html(data.slice(0, 100));
        });
      });
    });
    </script>

書式

$.ajax(URL,[セッティング])
$.ajax([セッティング])

$.ajax(
  "test.php"
).done(function() {
  alert('成功');
});

サンプル

$.ajax()メソッドでHTTPサーバと通信する

<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.email = $('input[name=email]').val();
          param.phone = $('input[name=phone]').val();
  
          $.ajax({
            url:'sample.php',
            data:param,
            dataType: 'json'
          }).done(function( data ){
            console.log(data);
            $('.desc').append('メールアドレス：'+data.email+'<br>電話番号：'+data.phone+'<br>');
          }).fail(function( data ){
            $('.desc').append('通信失敗<br>');
          }).always(function( data ){
            $('.desc').append('通信完了<br>');
          })
        });
      });
      </script>
    </body>

sample.php

<?php
$data = array();
$data['email'] = filter_input(INPUT_GET, 'email');
$data['phone'] = filter_input(INPUT_GET, 'phone');
echo json_encode($data);

カテゴリー:AjaxJavaScriptjQuery