php中button点击事件,PHP相应button中的onclick事件

PHP是服务器端代码 ，html是客户端代码，实现button的onclick事件，就是客户端调用服务器端函数，因此就得向服务器提交请求。

有一种简单粗暴的方式，就是button是a标签时，可以直接在href里面写上要执行的php页面(或者通过给button绑定window.location通过JS跳转到到PHP)。这种做法就得为每一个button设计一个PHP代码。

而我的做法是：事件+ajax 给button绑定点击事件，然后执行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

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

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);

}

按钮1

按钮2

方式二：index.php

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

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);

}

}

}

按钮1

按钮2

方式一参考资料：

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

更过相关问题请访问PHP中文网：PHP视频教程