溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

PHP相應(yīng)button中onclick事件的案例分析

發(fā)布時(shí)間：2020-11-10 11:28:31 來源：億速云 閱讀：365 作者：小新 欄目：編程語言

小編給大家分享一下PHP相應(yīng)button中onclick事件的案例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

PHP是服務(wù)器端代碼 ，html是客戶端代碼，實(shí)現(xiàn)button的onclick事件，就是客戶端調(diào)用服務(wù)器端函數(shù)，因此就得向服務(wù)器提交請求。

有一種簡單粗暴的方式，就是button是a標(biāo)簽時(shí)，可以直接在href里面寫上要執(zhí)行的php頁面（或者通過給button綁定window.location通過JS跳轉(zhuǎn)到到PHP）。這種做法就得為每一個(gè)button設(shè)計(jì)一個(gè)PHP代碼。

而我的做法是：事件+ajax 給button綁定點(diǎn)擊事件，然后執(zhí)行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

方式二參考資料：

創(chuàng)建 XMLHttpRequest 對象:

http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp

向服務(wù)器發(fā)送請求:

http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

服務(wù)器響應(yīng):

http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_response.asp

onreadystatechange 事件:

http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp

以上是PHP相應(yīng)button中onclick事件的案例分析的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手