jQuery 「Ajax」Ajaxプレフィルタ

$.ajax()がコールされるごとにオプションを変更したい場合などにフィルタとなる関数を設定するメソッドです、第1引数でデータタイプを指定することで、フィルタの対象となるデータタイプを限定できます。複数のデータタイプを対象とする場合スペース区切りで指定します。第2引数のイベントハンドラの引数

オプション・・・リクエストされたオプション
オリジナルオプション・・・$.ajax()メソッドに指定されたオプション
jqXHR・・・jqXHRオブジェクト

書式

$.ajaxPrefilter( [データタイプ], イベントハンドラ )

$.ajaxPrefilter('json' , function(opt, orig, jqxhr){
・
・
・
});

サンプル

チェックボックスでGET/POSTメソッドを切り替える

<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>
          POSTで送る<input class="form-input" type="checkbox" name="sendpost" value="yes"><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 post = $('input:checked').val();
          var param = new Object();
          param.email = $('input[name=email]').val();
          param.phone = $('input[name=phone]').val();
  
          $.ajaxPrefilter('json', function(options,originaloptions,jqxhr){
            if(post){
              options.type = 'POST';
              $('.deec').append('POSTで送信します…<br>');
            }
          });

          $.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();
if($_SERVER["REQUEST_METHOD"] == 'POST'){
  $data['email'] = filter_input(INPUT_POST, 'email');
  $data['phone'] = filter_input(INPUT_POST, 'phone');
}else{
  $data['email'] = filter_input(INPUT_GET, 'email');
  $data['phone'] = filter_input(INPUT_GET, 'phone');
}
echo json_encode($data);

カテゴリー:AjaxJavaScriptjQuery