ESSAY / NOTE
[重点]Jquery使用Ajax与PHP交互案例
此案例详细讲述了Jquery使用Ajax与PHP交互案例
主要使用了 LOAD GET POST 三个重要的方法 处理test/json/xml的数据 各有异同 将原生ajax进行了封装处理
此案例属于经典案例 也是重要的初级案例 必须完全掌握
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="jquery-1.3.1.js"></script>
<style type="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>
<!--引入jquery的js库-->
</head>
<body>
<form action="" name="form1" id="form1">
<input type="text" name="username" id="username" value="zhang"><br>
<input type="text" name="psw" id="psw" value="99999"><br>
<input type="button" id="b1" value="登陆">
</form>
<div id="one">
</div>
</body>
<script language="JavaScript">
$(document).ready(function(){
//load的get方式提交
/* $('#b1').click(function(){
//使用jquery提供的方法来发出ajax的请求
//1.第一个参数表示把ajax请求发送给url
//2.第二个参数表示是否发送数据data ,如果你要发送则数据的格式应当是 "{'username':'顺平'}";
//如果你不发送数据，则填入null , 如果你发送有数据给服务器文件,默认load方法是以post方式提交
//否则是以get方式提交
//3.第三个参数是函数(回调函数)
//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(){
//使用jquery提供的方法来发出ajax的请求
//1.第一个参数表示把ajax请求发送给url
//2.第二个参数表示是否发送数据data ,如果你要发送则数据的格式应当是 "{'username':'顺平'}";
//如果你不发送数据，则填入null , 如果你发送有数据给服务器文件,默认load方法是以post方式提交
//否则是以get方式提交
//3.第三个参数是函数(回调函数)
//data表示从服务器回送的数据(string)
//textStatus表示状态有四个succuss, error, notmodify, timeout
//xmlHttpRequest表示XMLHttpRequest对象
var send_data={"username":$("#username").val(),"psw":$("#psw").val()}; //json数据格式
$('#one').load("loadController.php",send_data,function(data,textStatus,xmlHttpRequest){
//alert("服务器返回"+data);
//alert(data);
//如服务器端返回的数据格式是json格式，则应当怎样处理
// var obj=eval("("+data+")");
// window.alert(obj.res+" "+obj.info);
//如果服务器返回的数据格式是xml格式的
var result=xmlHttpRequest.responseXML;
//取出返回的res
var res=result.getElementsByTagName('res');
window.alert(res[0].childNodes[0].nodeValue);
//jquery
//思考
});
})*/
//使用$.post方法=>你自己就知道怎样使用$.get方法.
//这个方法不依赖于一个jquery对象.
//第一个参数表示向哪个php页面发送请求.
$('#b1').click(function(){
var send_data={"username":$("#username").val(),"psw":$("#psw").val()};
var xmlHttpRequest=$.post("loadController.php",send_data,function(data,ts){
//如果服务器返回的是text
//alert(data);
//如果服务器返回的是json格式
// var objs=eval("("+data+")");
//如果不转，objs是dom对象集合
// var $objs=$(objs);//jquery对象集合
//$objs表示[{'res':'不可以用','info':'哈哈'},{'res':'不uu','info':'哈哈uu'}]
// $objs.each(function(){
// alert(this.res+this.info);
// })
//xml格式->dom
var xmlObjs=xmlHttpRequest.responseXML;
//dom方法来解析
var res=xmlObjs.getElementsByTagName('res');
alert(res[0].childNodes[0].nodeValue);
})
})
});
</script>
</html>
<?php
//header("content-type: text/html;charset=utf-8");
//返回xml格式
header("content-type: text/xml;charset=utf-8");
//file_put_contents("d:/mylog.log","ok",FILE_APPEND);
$username=$_POST['username'];
file_put_contents("d:/mylog.log","ok".$username."\r\n",FILE_APPEND);
if($username=="lee"){
//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>";
}
?>