PHP响应button的onclick事件

PHP是服务器端代码 ，html是客户端代码，实现button的onclick事件，就是客户端调用服务器端函数，因此就得向服务器提交请求。

有一种简单粗暴的方式，就是button是a标签时，可以直接在href里面写上要执行的php页面（或者通过给button绑定window.location通过JS跳转到到PHP）。这种做法就得为每一个button设计一个PHP代码。

而我的做法是：事件+ajax 给button绑定点击事件，然后执行ajax。

server.php

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

方式一：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">按钮1</button>       <button type="button" class="btn" id="btn2" οnclick="fun2(this)" value="btn2">按钮2</button>   </div></body></html>

方式二：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">       var xmlHttp;        function createXMLHttpRequest(){            //检查浏览器是否支持 XMLHttpRequest 对象           if(window.ActiveXObject){               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");            }           else if(window.XMLHttpRequest){             xmlHttp = new XMLHttpRequest();            }       }       function fun(n){            createXMLHttpRequest();         var url="server.php";            xmlHttp.open("POST",url,true);            xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');          xmlHttp.onreadystatechange = callback;         xmlHttp.send("action=" + n.value);      }       function callback(){            if(xmlHttp.readyState == 4){              if(xmlHttp.status == 200){                    alert(xmlHttp.responseText);                }           }       }   </script></head><body>    <div>     <button type="button" class="btn" id="btn1" οnclick="fun(this)" value="btn1">按钮1</button>        <button type="button" class="btn" id="btn2" οnclick="fun(this)" value="btn2">按钮2</button>    </div></body></html>

方式一参考资料：

jQuery ajax - post() 方法:http://www.w3school.com.cn/jquery/ajax_post.asp

方式二参考资料：

创建 XMLHttpRequest 对象:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp

向服务器发送请求:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

服务器响应:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_response.asp

onreadystatechange 事件:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp

PHP响应button的onclick事件相关推荐

onclick 调用php,php中如何响应button的onclick事件
PHP是服务器端代码 ,html是客户端代码,实现button的onclick事件,就是客户端调用服务器端函数,因此就得向服务器提交请求. 有一种简单粗暴的方式,就是button是a标签时,可以直接在 ...
aspx.net响应点击事件(页面button的onclick事件)
aspx.net响应点击事件(页面button的onclick事件) aspx.net制作网页还是比较简单的,直接动态网页并且连接数据库都是so easy首先在页面代码片: <form id=& ...
php事件编程,PHP相应button中onclick事件的案例分析
PHP相应button中onclick事件的案例分析发布时间:2020-11-10 11:28:31 来源:亿速云阅读:71 作者:小新小编给大家分享一下PHP相应button中onclick事 ...
android onclick方法吗,Android中button的onClick事件几种方法
Android中button的onClick事件几种方法发布时间:2020-09-03 02:36:31 来源:脚本之家阅读:100 作者:水桶前辈 Android中button的onClick事 ...
js按钮触发网页提醒_js触发asp.net的Button的Onclick事件应用
在asp.net引入事件驱动之后,在一个页面上很容易解决多个按钮触发不同事件的问题,避免了在asp中需要多个form或者通过js脚本来控制的麻烦. asp.net带来便利的同时,也带来一个问题.在实际 ...
js触发asp.net的Button的Onclick事件
在asp.net引入事件驱动之后,在一个页面上很容易解决多个按钮触发不同事件的问题,避免了在asp中需要多个form或者通过js脚本来控制的麻烦. asp.net带来便利的同时,也带来一个问题.在实 ...
php button onclick,php实现button的onclick事件的方法
php实现button的onclick事件的方法发布时间:2020-06-25 14:16:47 来源:亿速云阅读:141 作者:Leah 本篇文章为大家展示了php实现button的onclic ...
Asp.Net回车键触发Button的OnClick事件解决方案
在aspx页面有textbox文本框,还有三个button按钮.启用textbox的TextChanged事件和button的click事件. 问题: 现在在textbox文本框输入完数据按" ...
Android listView中的button点击事件
如果listView中的item有button控件,那么如何获取listView中的button控件?又如何在点击button时定位当前的item? 在listview中的listitem设置事件响应 ...
html onclick事件无效巨坑
html onclick事件无效 html无法触发onclick 最近在学习JavaScript的时候,想copy别人的csdn博客上的一个例子例子1链接结果onclick死活绑不上去,然后又试了 ...

PHP响应button的onclick事件

PHP响应button的onclick事件相关推荐

最新文章

热门文章