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等)のキャッシュ設定によっては不要。
関連記事
-
-
jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...
-
-
jQueryからAjax経由でPHPにリクエストしCookieを操作する方法
先日PHPでCookie保存時にHttpOnly / Secure属性を設定する ...
-
-
簡単にtable内をソート
やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...
-
-
jQueryでiframe内の要素を呼び出し
jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...
-
-
タブアンダー広告をjQueryで再現する方法
サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...