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>";
}
?>
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
