jQuery Ajaxリクエストでphpファイルに送信するサンプル
環境
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のクラスの中身を書き換えます。