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等)のキャッシュ設定によっては不要。
関連記事
-
-
HTMLのカスタムデータ属性をjQueryで取得する際はキャッシュに注意する
ASPを使用したサイトでHTMLのカスタムデータ属性を取得し色々処理したかったん ...
-
-
jQueryでHTMLの特定要素をループ時に逆順で処理する方法
jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...
-
-
tableタグ内のデータをCSV形式でダウンロードできる「jQuery-csvExport」ライブラリの使用方法
HTMLのtableタグ内のデータをCSV形式でエクスポートさせたいケースがあっ ...
-
-
ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法
ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...
-
-
jQueryプラグインでクリップボードにコピーする方法(clipboard.js)
ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...