勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法

   2024/02/06  jQuery JavaScript

jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAjax通信してリクエスト結果を特定のテキストボックスのvalueに反映させたい。また、Ajax通信するページは読み込む度に異なる内容が表示されるため、ボタンを押すたびにその内容を反映させたい。以下にソースコードとサンプルをメモ。

 

リファレンス

https://api.jquery.com/jQuery.ajax/

 

サンプル

https://taitan916.info/sample/ajax/btn_textbox/

 

ソースコード

Ajax通信の結果を返すページ(ajax.php)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
$name = array('山田', '鈴木', '佐々木', '田中');
echo $name[array_rand($name, 1)];
<?php $name = array('山田', '鈴木', '佐々木', '田中'); echo $name[array_rand($name, 1)];
<?php
$name = array('山田', '鈴木', '佐々木', '田中');
echo $name[array_rand($name, 1)];

「$name」配列の中からランダムで1つの値を表示する形。

Ajax通信リクエストするページ(index.php)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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 JavaScript

  関連記事

jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法

システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...

tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)

テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...

adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法

サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...

jQueryにてCookieを取り扱う「jquery-cookie」プラグインの利用方法

jQueryでcookieを簡単に取り扱える「jquery-cookie」プラグ ...

S