PHP响应button的onclick事件

最新推荐文章于 2022-12-29 11:00:52 发布

zh17822307855

最新推荐文章于 2022-12-29 11:00:52 发布

阅读量221

点赞数

本文链接：https://blog.csdn.net/zh17822307855/article/details/112856600

版权

本文介绍了如何使用jQuery和原生XMLHttpRequest在HTML中通过AJAX技术，让客户端按钮点击触发PHP服务器端的函数，实现不同按钮对应的不同操作。展示了两种方法并附带相关参考资料链接。

摘要由CSDN通过智能技术生成

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