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 リクエストがタイムアウトする時間をミリ秒
success リクエストが成功したときのコールバック関数

使用例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ajaxのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>
      <label>名前：</lable><input type="text" name="username" id="username">
      <input type="button" id="btnreg" value="送信">
</p>

<div id="result"></div>

<script type="text/javascript">
$(function(){
      $('#btnreg').click(function(){
            $.ajax({
                  url:'reg.php',
                  type:'GET',
                  dataType:'text',
                  data: {
                        username:$('#username').val()
                  },
            }).done(function(data){
                //Ajax通信に成功したときの処理
                  $('#result').html(data);
            }).fail(function(){
                   //Ajax通信に失敗したときの処理コード
            });
      });
});
</script>
</body>
</html>

説明
テキストボックスに名前を入力し、送信ボタンを押すとAjaxリクエストを送信します。

1.送信ボタンのクリック処理　$('#btnreg').click(function(){処理コード
2.「type:'GET'」を指定してAjaxリクエストはGETで送信します。
3.「data: {username:$('#username').val()｝」でテキストボックスに入力された文字列を設定します
4.「$('#result').html(data)」でdiv要素resultにajaxのクラスの中身を書き換えます。

Ajax

Posted by arkgame

Related posts: