jquery與ajax的整合
jquery是一個經典的js框架，ajax又是以js爲核心的多語言異步刷新技術，那麼兩者結合，各自發揮所長，必定威力巨大，我們一般會選擇用ajax實現前臺與後臺的數據傳遞，而用jquery技術實現對dom的各種操作。jquery爲簡化ajax引擎的創建和業務邏輯，提供了三種可選的方式，post()是最爲常用的方式，load()需要用一個jquery對象調用，且返回結果給這個對象，get()則要保證每次提交的數據不同。下面通過一個具體的登錄案例代碼，展示如何將兩者完美結合。
l 前臺頁面代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax_jquery整合</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript" src="js/jquery-1.3.1.js"></script>
<styletype="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background:#CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
</head>
<body>
<formaction="" name="form1" id="form1">
<inputtype="text" name="username" id="username"value="zhang"><br>
<inputtype="text" name="psw" id="psw"value="99999"><br>
<input type="button"id="b1" value="登陸">
</form>
<divid="one"></div>
</body>
<script language="JavaScript">
$(document).ready(function(){
//load的get方式提交，無數據默認用get方式，有數據用post方式，會返回data
/*$('#b1').click(function(){
//1.第一個參數url
//2.第二個參數data ,格式應當是 "{'username':'順平'}";
//3.第三個參數是函數(回調函數)
//function內的data表示從服務器回送的數據(string)
//textStatus表示狀態有四個succuss, error, notmodify,timeout
//xmlHttpRequest表示XMLHttpRequest對象
$('#one').load("loadController.php?date"+Math.random()+"&username="+$('#username').val(),null,function(data,textStatus,xmlHttpRequest){
//alert("服務器返回"+data);
$(this).text(data);
});
})*/
//客戶端發送json ,以post方式；服務器端回送的text
/*$('#b1').click(function(){
varsend_data={"username":$("#username").val(),"psw":$("#psw").val()}; //json數據格式
$('#one').load("loadController.php",send_data,function(data,textStatus,xmlHttpRequest){
//服務器返回文本data,處理如下
//alert("服務器返回"+data);
//alert(data);
//如服務器端返回的數據格式是json格式，則應當處理如下
//varobj=eval("("+data+")");
//window.alert(obj.res+""+obj.info);
//如果服務器返回的數據格式是xml格式的
varresult=xmlHttpRequest.responseXML;
varres=result.getElementsByTagName('res');
window.alert(res[0].childNodes[0].nodeValue);
});
})*/
//使用$.post方法如下[$.get方式雷同]
$('#b1').click(function(){
varsend_data={"username":$("#username").val(),"psw":$("#psw").val()};
varxmlHttpRequest=$.post("loadController.php",send_data,function(data,ts){
//若服務器返回的是text
//alert(data);
//若服務器返回的是json格式
//varobjs=eval("("+data+")");
//var$objs=$(objs);//jquery對象集合，如果不轉，objs是dom對象集合
//$objs.each(function(){
// alert(this.res+this.info);
//})
//若返回的是xml格式，則轉換爲dom
varxmlObjs=xmlHttpRequest.responseXML;
varres=xmlObjs.getElementsByTagName('res');
alert(res[0].childNodes[0].nodeValue);
})
})
});
</script>
</html>
l 後臺邏輯代碼[loadController.php]：
<?php
//返回html格式或json格式
//header("content-type:text/html;charset=utf-8");
//返回xml格式
header("content-type:text/xml;charset=utf-8");
$username=$_POST['username'];
//file_put_contents("d:/mylog.log","ok".$username."\r\n",FILE_APPEND);
if($username=="xiaoxiao"){
//echo"不可以用";
//echo"[{'res':'不可以用','info':'哈哈'},{'res':'不uu','info':'哈哈uu'}]";
echo "<result><res>不可以用</res><info>哈哈</info></result>";
}else{
//echo "可以用";
//echo "[{'res':'可以用','info':'嘻嘻'},{'res':'可以iii用','info':'xixn'}]";
echo"<result><res>可以用</res><info>嘻嘻</info></result>";
}
?>