PHP相应button中的onclick事件

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

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

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

1、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 scripttype: "POST", //request typedata:{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中文网：PHP视频教程

更多相关文章

随机推荐