jQuery AjaxとPHP通信を行うサンプル

2022年10月21日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit
jQuery 3.6.0

書き方

$.ajax({        
      url: "リクエストを送るURL"
      type: 'POST',
      data: {変数名:値"},
      timeout: タイムアウトの時間,
      dataType: 'text'

画面の一部分だけ更新する際にajaxを利用します。
説明
URL リクエストを送るURL
method 'POST’、’GET’、’PUT’のHTTPメソッド。デフォルトは’GET’
data サーバーに送るデータ
dataType　’xml’、’html’、’script’、’json’、’jsonp’、’text’など使用可能なタイプ
timeout リクエストがタイムアウトする時間をミリ秒

使用例

<script type="text/javascript">
    
$(function () {
    $('a').click(function (event) {
          // 送信をキャンセル
       event.preventDefault();
    }),
        
    $.ajax({        
        url: "reg.php"
        type: 'POST',
        data: {val:"user007"},
        timeout: 10000,
        dataType: 'text'
    }).done(function (data) { 
        alert('通信成功');
            //Ajax通信に成功したときの処理コード
    }).fail(function (data) {
        alert('通信失敗');
             //Ajax通信に失敗したときの処理コード
    }).always(function (data) {
        alert('処理完了');    
             //処理が完了した場合の処理コード
   });
});
 
</script>

説明

.done(function (data) { 通信に成功した場合処理コード
.fail(function (data) {通信が失敗した場合処理コード
.always(function (data) {doneかfailを含めて処理が完了した場合処理コード