Heim > Artikel > Backend-Entwicklung > onclick-Ereignis in der entsprechenden Schaltfläche in PHP

onclick-Ereignis in der entsprechenden Schaltfläche in PHP

王林nach vorne: 2019-08-22 14:33:524074Durchsuche

PHP ist serverseitiger Code und HTML ist clientseitiger Code. Um das Onclick-Ereignis der Schaltfläche zu implementieren, ruft der Client die serverseitige Funktion auf und muss daher eine Anfrage an den Server senden.

Es gibt eine einfache und grobe Möglichkeit: Wenn die Schaltfläche ein A-Tag ist, können Sie die auszuführende PHP-Seite direkt in die href schreiben (oder über JS zu PHP springen, indem Sie window.location binden auf die Schaltfläche) . Dieser Ansatz erfordert das Entwerfen eines PHP-Codes für jede Schaltfläche.

Was ich mache ist: event+ajax bindet das Click-Ereignis an die Schaltfläche und führt dann Ajax aus.

1. server.php

<?php 
	if (isset($_POST[&#39;action&#39;]))
	{
		switch($_POST[&#39;action&#39;])
		{
			case "btn1":btn1();break;
			case "btn2":btn2();break;
			default:break;
		}
	}
	
	function btn1()
	{
		echo "hello 按钮1";
	}
	function btn2()
	{
		echo "hello 按钮2";
	}
 
?>

Methode 1: 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>

Methode 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">
		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(&#39;Content-type&#39;, &#39;application/x-www-form-urlencoded&#39;);
			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>

Methode 1 Referenz:

jQuery ajax – post()-Methode:

http://www.w3school.com.cn/jquery/ajax_post.asp

Methode 2 Referenz:

XMLHttpRequest-Objekt erstellen:

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

Anfrage an den Server senden:

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

Serverantwort:

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

onreadystatechange event:

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

Für weitere verwandte Fragen besuchen Sie bitte die chinesische PHP-Website: PHP-Video-Tutorial

Das obige ist der detaillierte Inhalt vononclick-Ereignis in der entsprechenden Schaltfläche in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery ajax html JS 对象事件 location href http

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Die Beziehung zwischen PHP-Klassen und ObjektenNächster Artikel：Die Beziehung zwischen PHP-Klassen und Objekten

In Verbindung stehende Artikel

Mehr sehen