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で再現する方法
サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...
-
スマホ対応のjQueryのカラーピッカープラグイン「excolor」の利用方法
以前の記事でカラーピッカープラグインのことを書いたけどスマホでは使えない。なので ...
-
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー の実装方法
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...
-
JavaScriptのbeforeunloadイベントでページの離脱防止
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...
-
オリジナルのjQueryプラグインを作成する方法
オリジナルのjQueryプラグインを作ってみたかった。というのも大抵のものはググ ...