PHP の対応するボタンの onclick イベント-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

PHP の対応するボタンの onclick イベント

王林

Aug 22, 2019 pm 02:33 PM

onclick

PHP はサーバー側コード、HTML はクライアント側コードです。ボタンの onclick イベントを実装するには、クライアントはサーバー側関数を呼び出すため、サーバーにリクエストを送信する必要があります。

単純で大雑把な方法があります。つまり、ボタンが a タグの場合、href に実行する PHP ページを直接記述する (または window.location をバインドして JS 経由で PHP にジャンプする) ことができます。ボタンまで）。このアプローチでは、ボタンごとに PHP コードを設計する必要があります。

私のアプローチは、イベント 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

その他の関連する質問については、PHP 中国語 Web サイトをご覧ください:

PHP ビデオチュートリアル

以上がPHP の対応するボタンの onclick イベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7724

Java チュートリアル

1643

CakePHP チュートリアル

1396

Laravel チュートリアル

1290

PHP チュートリアル

1233

Related knowledge

Alipay PHP SDK転送エラー：「クラスの看板を宣言できない」という問題を解決する方法は？ Apr 01, 2025 am 07:21 AM

Alipay Php ...

セッションのハイジャックはどのように機能し、どのようにPHPでそれを軽減できますか？ Apr 06, 2025 am 12:02 AM

セッションハイジャックは、次の手順で達成できます。1。セッションIDを取得します。2。セッションIDを使用します。3。セッションをアクティブに保ちます。 PHPでのセッションハイジャックを防ぐための方法には次のものが含まれます。1。セッション_regenerate_id（）関数を使用して、セッションIDを再生します。2。データベースを介してストアセッションデータを3。

JSON Web Tokens（JWT）とPHP APIでのユースケースを説明してください。 Apr 05, 2025 am 12:04 AM

JWTは、JSONに基づくオープン標準であり、主にアイデンティティ認証と情報交換のために、当事者間で情報を安全に送信するために使用されます。 1。JWTは、ヘッダー、ペイロード、署名の3つの部分で構成されています。 2。JWTの実用的な原則には、JWTの生成、JWTの検証、ペイロードの解析という3つのステップが含まれます。 3. PHPでの認証にJWTを使用する場合、JWTを生成および検証でき、ユーザーの役割と許可情報を高度な使用に含めることができます。 4.一般的なエラーには、署名検証障害、トークンの有効期限、およびペイロードが大きくなります。デバッグスキルには、デバッグツールの使用とロギングが含まれます。 5.パフォーマンスの最適化とベストプラクティスには、適切な署名アルゴリズムの使用、有効期間を合理的に設定することが含まれます。

phpstormでCLIモードをデバッグする方法は？ Apr 01, 2025 pm 02:57 PM

phpstormでCLIモードをデバッグする方法は？ PHPStormで開発するときは、PHPをコマンドラインインターフェイス（CLI）モードでデバッグする必要がある場合があります。

確固たる原則と、それらがPHP開発にどのように適用されるかを説明してください。 Apr 03, 2025 am 12:04 AM

PHP開発における固体原理の適用には、次のものが含まれます。1。単一責任原則（SRP）：各クラスは1つの機能のみを担当します。 2。オープンおよびクローズ原理（OCP）：変更は、変更ではなく拡張によって達成されます。 3。Lischの代替原則（LSP）：サブクラスは、プログラムの精度に影響を与えることなく、基本クラスを置き換えることができます。 4。インターフェイス分離原理（ISP）：依存関係や未使用の方法を避けるために、細粒インターフェイスを使用します。 5。依存関係の反転原理（DIP）：高レベルのモジュールと低レベルのモジュールは抽象化に依存し、依存関係噴射を通じて実装されます。