PHP相应button中的onclick事件

互联网 19-8-22

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