PHP相应button中的onclick事件
内容导读
收集整理的这篇技术教程文章主要介绍了PHP相应button中的onclick事件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3627字，纯文字阅读大概需要6分钟。
内容图文
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 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中文网：PHP视频教程
以上就是PHP相应button中的onclick事件的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是为您收集整理的PHP相应button中的onclick事件全部内容，希望文章能够帮你解决PHP相应button中的onclick事件所遇到的程序开发问题。 如果觉得技术教程内容还不错，欢迎将网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
