在開(kāi)發項目中，我們會(huì)經常碰到需要及時(shí)開(kāi)啓某項功能的情況，通(tōng)過Ajax實現實時(shí)開(kāi)啓和(hé)關閉功能，無疑增強了用戶體(tǐ)驗。本文以360安全衛士的木馬防火(huǒ)牆開(kāi)關為(wèi)背景，使用PHP、jquery、MYSQL實現了及時(shí)開(kāi)啓和(hé)關閉産品功能的WEB應用。

準備工作(zuò)

為(wèi)了更好的演示本例，我們需要一個(gè)數(shù)據表，記錄需要的功能說明(míng)及開(kāi)啓狀态，表結構如下：

你(nǐ)可(kě)以向表中pro插入幾條數(shù)據。

index.php

我們要在頁面顯示相關功能列表，使用PHP讀取數(shù)據表，并以列表的形式展示。

連接數(shù)據庫，然後循環輸出産品功能列表。

CSS

為(wèi)了渲染一個(gè)比較好的頁面外觀，我們使用CSS來(lái)美化頁面，使得(de)頁面更符合人(rén)性化。使用CSS,我們隻需用一張圖片來(lái)标識開(kāi)關按鈕。

CSS代碼，我不想詳述，提示下我們使用了一張圖片，然後通(tōng)過background-position來(lái)定位圖片的位置，這是大(dà)多(duō)數(shù)網站(zhàn)使用的方法，好處咱就不說了。

jQuery

我們通(tōng)過單擊開(kāi)關按鈕，及時(shí)請(qǐng)求後台，改變對應的功能開(kāi)關狀态。這個(gè)過程是一個(gè)典型的Ajax應用。通(tōng)過點擊開(kāi)關按鈕，前端向後台PHP發送post請(qǐng)求，後台接收請(qǐng)求，并查詢數(shù)據庫，并将結果返回給前端，前端jQuery根據後台返回的結果，改變按鈕狀态。

$(function(){
    //鼠标滑向換色
	$(".list").hover(function(){
		$(this).addClass("cur_select");
	},function(){
		$(this).removeClass("cur_select");
	});
	
	//關閉
	$(".ad_on").live("click",function(){
		var add_on = $(this);
		var status_id = $(this).attr("rel");
		$.post("action.php",{status:status_id,type:1},function(data){
			if(data==1){
				add_on.removeClass("ad_on").addClass("ad_off").attr("title","點擊開(kāi)啓");
			}else{
				alert(data);
			}
		});
	});
	//開(kāi)啓
	$(".ad_off").live("click",function(){
		var add_off = $(this);
		var status_id = $(this).attr("rel");
		$.post("action.php",{status:status_id,type:2},function(data){alert(data);  
			if(data==1){
				add_off.removeClass("ad_off").addClass("ad_on").attr("title","點擊關閉");
			}else{
				alert(data);
			}
		});
	});
});

說明(míng)，代碼中，首先實現了鼠标滑向功能列表換色的功能（詳見demo），然後就是單擊開(kāi)關按鈕，向後台action.php發送Ajax請(qǐng)求，提交的參數(shù)是對應功能的id和(hé)type，用于後台區(qū)分請(qǐng)求的是哪個(gè)功能和(hé)請(qǐng)求的類型（開(kāi)啓和(hé)關閉）。其實，大(dà)家(jiā)稍微留神，可(kě)以看出，根據Ajax請(qǐng)求成功返回結果後，開(kāi)關按鈕動态改變樣式，實現改變開(kāi)關狀态的功能。

action.php

後台action.php接收到前端的請(qǐng)求，根據參數(shù)執行(xíng)SQL語句，更新對應功能的狀态，成功後将結果返回給前端，請(qǐng)看代碼：

require_once('connect.php');
$id = $_POST['status'];
$type = $_POST['type'];
if($type==1){ //關閉
	$sql = "update pro set status=0 where id=".$id;
}else{ //開(kāi)啓
	$sql = "update pro set status=1 where id=".$id;
}
$rs = mysql_query($sql);
if($rs){
	echo '1';
}else{
	echo '服務器(qì)忙，請(qǐng)稍後再試！';
}