ボタンの onclick イベントに対する PHP の応答

2022-02-16 13:19:32

PHP is the server-side code , html is the client-side code, and implementing the onclick event of the button is a client-side call to a server-side function, so it has to submit a request to the server.

There is a simple and brutal way to do this, which is to write the php page to be executed directly in the href when the button is an a tag (or by binding window.location to the button and jumping to PHP via JS). This approach would involve designing a PHP code for each button.

Instead, my approach is: event+ajax binds a click event to the button, then executes ajax.

<?php   
    if (isset($_POST['action']))  
    {  
        switch($_POST['action'])  
        {  
            case "btn1":btn1();break;  
            case "btn2":btn2();break;  
            default:break;  
        }  
    }  
      
    function btn1()  
    {  
        echo "hello button1";  
    }  
    function btn2()  
    {  
        echo "hello button2";  
    }  
  
? >

<html>  
<head>  
    <style>  
    div {width:600px;margin:200px auto;}  
      
    .btn {  
        background-color:#44c767;  
        -moz-border-radius:28px;  
        -webkit-border-radius:28px;  
        border-radius:28px;  
        border:1px solid #18ab29;  
        display:inline-block;  
        cursor:pointer;  
        color:#ffffff;  
        font-family:Arial;  
        font-size:17px;  
        padding:16px 31px;  
        text-decoration:none;  
        text-shadow:0px 1px 0px #2f6627;  
    }  
    .btn:hover {  
        background-color:#5cbf2a;  
    }  
    .btn:active {  
        position:relative;  
        top:1px;  
    }  
      
    #btn2 {float:right;}  
      
    </style>  
      
    <script type="text/javascript" language="javascript" src="jquery.js"></script>  
    <script type="text/javascript" language="javascript">  
        function fun(n) {  
            $.ajax({  
                url:"server.php", //the page containing php script  
                type: "POST", //request type  
                data:{action: n.value},  
                success:function(result){  
                    alert(result);  
                }  
            });  
        }  
          
        function fun2(n) {  
            var url = "server.php";  
            var data = {  
                action : n.value  
            };  
            jQuery.post(url, data, callback);  
        }  
        function callback(data) {  
            alert(data);  
        }  
    </script>  
</head>  
  
<body>  
    <div>  
        <button type="button" class="btn" id="btn1" οnclick="fun(this)" value="btn1"> button 1</button>  
        <button type="button" class="btn" id="btn2" οnclick="fun2(this)" value="btn2"> button2</button>  
    </div>  
</body>  
  
  
</html>

server.php

<?php   
    if (isset($_POST['action']))  
    {  
        switch($_POST['action'])  
        {  
            case "btn1":btn1();break;  
            case "btn2":btn2();break;  
            default:break;  
        }  
    }  
      
    function btn1()  
    {  
        echo "hello button1";  
    }  
    function btn2()  
    {  
        echo "hello button2";  
    }  
  
? >

方法1：index.php

<html>  
<head>  
    <style>  
    div {width:600px;margin:200px auto;}  
      
    .btn {  
        background-color:#44c767;  
        -moz-border-radius:28px;  
        -webkit-border-radius:28px;  
        border-radius:28px;  
        border:1px solid #18ab29;  
        display:inline-block;  
        cursor:pointer;  
        color:#ffffff;  
        font-family:Arial;  
        font-size:17px;  
        padding:16px 31px;  
        text-decoration:none;  
        text-shadow:0px 1px 0px #2f6627;  
    }  
    .btn:hover {  
        background-color:#5cbf2a;  
    }  
    .btn:active {  
        position:relative;  
        top:1px;  
    }  
      
    #btn2 {float:right;}  
      
    </style>  
      
    <script type="text/javascript" language="javascript" src="jquery.js"></script>  
    <script type="text/javascript" language="javascript">  
        function fun(n) {  
            $.ajax({  
                url:"server.php", //the page containing php script  
                type: "POST", //request type  
                data:{action: n.value},  
                success:function(result){  
                    alert(result);  
                }  
            });  
        }  
          
        function fun2(n) {  
            var url = "server.php";  
            var data = {  
                action : n.value  
            };  
            jQuery.post(url, data, callback);  
        }  
        function callback(data) {  
            alert(data);  
        }  
    </script>  
</head>  
  
<body>  
    <div>  
        <button type="button" class="btn" id="btn1" οnclick="fun(this)" value="btn1"> button 1</button>  
        <button type="button" class="btn" id="btn2" οnclick="fun2(this)" value="btn2"> button2</button>  
    </div>  
</body>  
  
  
</html>

<スパンオンタイム時間別

ボタンの onclick イベントに対する PHP の応答

関連

[解決済み] RouteCollection.php の 219 行目で MethodNotAllowedHttpException が発生しました。

[解決済み] PHP - クラス内部で定数を定義する

[解決済み] phpでwgetを使うには？

[解決済み] サーバーを変更すると、SOAP_WSDLが動作しなくなる

[解決済み] PHPのインストール: bash: ./configure: パーミッションが拒否されました

[解決済み] json_decode() はパラメータ 1 が文字列であることを期待し、配列が指定される

[解決済み] 与えられた文字列からdata-urlを抽出する方法は？

[解決済み] 非整形の数値に遭遇した場合

[解決済み] DocuSign API: initialHereとsignHereを同じ文書に適用するかどうか。

[解決済み] 致命的なエラーメンバ関数 prepare() の NULL での呼び出し

最新

nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)

htmlページでギリシャ文字を使うには

ピュアhtml+cssでの要素読み込み効果

純粋なhtml + cssで五輪を実現するサンプルコード

ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード

タイピング効果を実現するピュアhtml+css

htmlの選択ボックスのプレースホルダー作成に関する質問

html css3 伸縮しない画像表示効果

トップナビゲーションバーメニュー作成用HTML+CSS

html+css 実装サイバーパンク風ボタン

おすすめ

[解決済み】phpMyAdmin: シークレットパスフレーズ？

[解決済み] PHP の文字列を改行で展開する

[解決済み] Bootstrap 4のGlyphiconが表示されない理由 [重複]について

[解決済み] PHP で、クラスが存在するかどうかを確認するにはどうすればよいですか?

[解決済み] PDOException SQLSTATE[HY000] [2002] 接続がタイムアウトした（私のローカルコンピュータで

[解決済み] fetch_array(MYSQLI_ASSOC) と fetch_all(MYSQLI_ASSOC) のどちらを使用するのが良いですか？

[解決済み] Wordpress wpdb->prepare sql string from form

[解決済み] Mandrillメール添付ファイルパス

tp5 appears 非整形の数値に遭遇した。

クロスドメイン問題オリジン "http://...... "のフレームがクロスオリジンフレームにアクセスするのをブロックした。