我们继续讲解jquery路径请求中，比如使用GET请求，使用POST请求，跟踪状态，载入文件，设置Ajax选项，序列化字符串
1.jquery GET请求
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("input").click(function(){ //绑定click事件
$.get("test2.php",{ //test2.php文件发出请求
name : "css8", //发送的请求信息
pass : 123456,
age : 1
},function(data){ //回调函数
alert(data); //显示响应信息
});
});
})
</script>
</head>
<body>
<input type="button" value="jQuery实现的异步请求" />
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("input").click(function(){
$.getJSON("test2.asp",function(data){
var data = data;
var str = "<table border=1 width=100%>";
str += "<tr>";
for(var name in data[0]){
str += "<th>" + name + "</th>";
}
str += "</tr>";
for(var i=0; i<data.length; i++){
str += "<tr>";
for(var name in data[i]){
str += "<td>" + data[i][name] + "</td>";
}
str += "</tr>";
}
str += "<table>";
$("div").html(str);
});
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="jQuery实现的异步请求" />
<div></div>
</html>
2.jquery POST请求
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("input").click(function(){ //绑定click事件
$.post("test.php",{ //向test.php文件发出请求
name : "css8", //发送的请求信息
pass : 123456,
age : 1
},function(data){ //回调函数
alert(data); //显示响应信息
});
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="jQuery实现的异步请求" />
</html>
3.jquery 跟踪状态
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("input").click(function(){
$.ajax({
type: "POST",
url: "test.php",
data: "name=css8"
});
$("div").ajaxStart(function(){
alert("Ajax请求开始");
})
$("div").ajaxSend(function(){
alert("Ajax请求将要发送");
})
$("div").ajaxComplete(function(){
alert("Ajax请求完成");
})
$("div").ajaxSuccess(function(){
alert("Ajax请求成功");
})
$("div").ajaxStop(function(){
alert("Ajax请求结束");
})
$("div").ajaxError(function(){
alert("Ajax请求发生错误");
})
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="jQuery实现的异步请求" />
<div></div>
</html>
4.jquery 载入文件
要载入tabel.html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="100%" border="1">
<tr>
<th>name</th>
<th>pass</th>
<th>age</th>
</tr>
<tr>
<td>zhu</td>
<td>123</td>
<td>1</td>
</tr>
<tr>
<td>zhang</td>
<td>456</td>
<td>2</td>
</tr>
<tr>
<td>wang</td>
<td>789</td>
<td>3</td>
</tr>
</table>
</body>
</html>
demo1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("input").click(function(){
$("div").load("table.html");
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="jQuery实现的异步请求" />
<div></div>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("input").click(function(){
var str = ($.ajax({ //调用ajax()方法，返回XMLHttpRequest对象
url : "table.html", //载入的URl
async: false //禁止异步载入
})).responseText; //获取XMLHttpRequest对象中包含的服务器响应信息
$("div").html(str); //把载入的网页内容附加到div元素内
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="jQuery实现的异步请求" />
<div></div>
</html>
5.jquery 设置Ajax选项
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$.ajaxSetup({ //预设公共选项
url: "test.php", //请求的URL
global: false, //禁止触发全局Ajax事件
type: "POST", //请求方式
dataType: "text", //响应数据的类型
success : function(data){ //响应成功之后的回调函数
alert(data);
}
});
$("input").eq(0).click(function(){ //为按钮1绑定异步请求
$.ajax({
data : "name=zhu" //发送请求的信息
});
});
$("input").eq(1).click(function(){ //为按钮2绑定异步请求
$.ajax({
data : "name=wang" //发送请求的信息
});
});
$("input").eq(2).click(function(){ //为按钮3绑定异步请求
$.ajax({
data : "name=zhang" //发送请求的信息
});
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="异步请求1" />
<input type="button" value="异步请求2" />
<input type="button" value="异步请求3" />
<div></div>
</html>
6.jquery 设置序列化字符串
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("#submit").click(function(){
$("p").html($("form").serialize()); //获取和格式化表单的请求字符串信息，并显示出来
return false; //禁止提交表单
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<form action="#" method="post">
姓名：<input type="text" name="user" /><br />
性别：
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="men" />女<br />
年级：
<select name="grade">
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select><br />
科目：
<select name="kemu" size="6" multiple="multiple">
<option value="yuwen">语文</option>
<option value="shuxue">数学</option>
<option value="waiyu">外语</option>
<option value="wuli">物理</option>
<option value="huaxue">化学</option>
<option value="jisuanji">计算机</option>
</select><br />
兴趣：
<input type="checkbox" name="love" value="yundong" />运动
<input type="checkbox" name="love" value="wenyi" />文艺
<input type="checkbox" name="love" value="yinyue" />音乐
<input type="checkbox" name="love" value="meishu" />美术
<input type="checkbox" name="love" value="youxi" />游戏<br />
<input type="submit" value="提交" id="submit" />
</form>
<p></p>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("#submit").click(function(){
//var array = $("form").serializeArray(); //注意，不能够直接在form元素上调用该方法
var array = $("input, select, :radio").serializeArray(); //在表单域对象上调用serializeArray()方法，
//返回包含传递表单域和值的JSON对象
var str = "[ <br />"
for(var i = 0; i<array.length; i++){ //遍历数组格式的JSON对象
str += " {"
for(var name in array[i]){ //遍历数组元素对象
str += name + ":" + array[i][name] + "," //组合为JSON格式字符串
}
str = str.substring(0,str.length-1); //清除最后一个字符
str += "},<br />";
}
str = str.substring(0,str.length-7); //清除最后7个字符
str += "<br />]";
$("p").html(str); //显示返回的JSON结构字符串
return false;
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<form action="#" method="post">
姓名：<input type="text" name="user" /><br />
性别：
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="men" />女<br />
年级：
<select name="grade">
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select><br />
科目：
<select name="kemu" size="6" multiple="multiple">
<option value="yuwen">语文</option>
<option value="shuxue">数学</option>
<option value="waiyu">外语</option>
<option value="wuli">物理</option>
<option value="huaxue">化学</option>
<option value="jisuanji">计算机</option>
</select><br />
兴趣：
<input type="checkbox" name="love" value="yundong" />运动
<input type="checkbox" name="love" value="wenyi" />文艺
<input type="checkbox" name="love" value="yinyue" />音乐
<input type="checkbox" name="love" value="meishu" />美术
<input type="checkbox" name="love" value="youxi" />游戏<br />
<input type="submit" value="提交" id="submit" />
</form>
<p></p>
</html>
