PHP에서 해당 버튼의 onclick 이벤트-PHP 튜토리얼-php.cn

PHP에서 해당 버튼의 onclick 이벤트

王林

풀어 주다： 2023-04-07 09:02:02

앞으로

4071명이 탐색했습니다.

PHP는 서버 측 코드이고 html은 클라이언트 측 코드입니다. 버튼의 onclick 이벤트를 구현하려면 클라이언트가 서버 측 함수를 호출하므로 서버에 요청을 제출해야 합니다.

간단하고 투박한 방법이 있습니다. 즉, 버튼이 a 태그인 경우 href에서 실행할 PHP 페이지를 직접 작성하거나 창을 바인딩하여 JS를 통해 점프할 수 있습니다. .버튼 위치) PHP). 이 접근 방식을 사용하려면 각 버튼에 대한 PHP 코드를 디자인해야 합니다.

내 접근 방식은 다음과 같습니다. event+ajax는 클릭 이벤트를 버튼에 바인딩한 다음 ajax를 실행합니다.

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";
	}
 
?>

로그인 후 복사

방법 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>

로그인 후 복사

방법 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>

로그인 후 복사

방법 1 참조: #🎜🎜 # jQuery ajax - post() 메서드:

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

# 🎜🎜#방법 2 참조:

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