jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法
2024/02/06
jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAjax通信してリクエスト結果を特定のテキストボックスのvalueに反映させたい。また、Ajax通信するページは読み込む度に異なる内容が表示されるため、ボタンを押すたびにその内容を反映させたい。以下にソースコードとサンプルをメモ。
リファレンス
https://api.jquery.com/jQuery.ajax/
サンプル
https://taitan916.info/sample/ajax/btn_textbox/
ソースコード
Ajax通信の結果を返すページ(ajax.php)
<?php
$name = array('山田', '鈴木', '佐々木', '田中');
echo $name[array_rand($name, 1)];
「$name」配列の中からランダムで1つの値を表示する形。
Ajax通信リクエストするページ(index.php)
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajaxでボタンとテキストボックス操作のサンプル</title>
</head>
<body>
<input type="text" id="name" value="">
<input type="button" value="テストボタン" id="name_change">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(`#name_change`).click(function(){
$.ajax({
url: `./ajax.php?t=${$.now()}`,
}).done(function(result){
if( result ){
$(`#name`).val(result);
}else{
alert(`エラーが発生しました。`);
}
//ajax自体のエラー時
}).fail(function(){
alert(`エラーが発生しました。`);
}).always(function(){
//完了後の処理
});
});
});
</script>
</body>
</html>
「./ajax.php?t=${$.now()}」部分はキャッシュ対策でタイムスタンプを付与している。ここはサーバ(Apache等)のキャッシュ設定によっては不要。
関連記事
-
-
ajaxで複数のデータを渡したい
やりたい事はajaxで複数のデータを渡したい。 ■送信側 var data = ...
-
-
jQueryのプラグイン(ColorPicker)でカラーコードを視覚的に選択させる方法
カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...
-
-
jQueryからAjax経由でPHPにリクエストしCookieを操作する方法
先日PHPでCookie保存時にHttpOnly / Secure属性を設定する ...
-
-
AjaxFileUploadで処理は実行できてもエラーが返る
AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...
-
-
ajaxのエラー詳細を取得する
success or errorで分岐処理はできるけど、 エラー詳細取れないの？ ...