正文
第八章 jQuery与Ajax应用
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Ajax(Asynchronous JavaScript and XML)，异步JavaScript和XML，它实现的无刷新更新页面，能够进行异步提交。
jQuery对Ajax进行了封装，最底层的是$.ajax()方法，第二层是$.load()，$.get()，$.post()方法，第三层是$.getScript()，$.getJSON()方法。
1. $.load()方法，能载入远程HTML代码插入到DOM中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#send").click(function(){
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
alert( $(this).html() ); //在这里this指向的是当前的DOM对象，即 $("#iptText")[0]
alert(responseText); //请求返回的内容
alert(textStatus); //请求状态：success，error
alert(XMLHttpRequest); //XMLHttpRequest对象
});
})
})
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">
已有评论：
</div>
<div id="resText" ></div>
</body>
</html>
2. $.get()与$.post()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){
$("#send").click(function(){
$.get("get.aspx", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
var username = data.username;
var content = data.content;
var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
},"json");
})
})
</script>
</head>
<body>
<form id="form1">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" ></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>
<div class='comment'>已有评论：</div>
<div id="resText" >
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){
$("#send").click(function(){
$.post("post.aspx", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
var username = data.username;
var content = data.content;
var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
},"json");
})
})
</script>
</head>
<body>
<form id="form1">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea id="content" ></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>
<div class='comment'>已有评论：</div>
<div id="resText" >
</div>
</body>
</html>
3. $.getScript()与$.getJSON()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function(){
$('#send').click(function() {
$.getScript('test.js');
});
})
</script>
</head>
<body>
<br/>
<p>
<input type="button" id="send" value="加载"/>
</p>
<div class="comment">已有评论：</div>
<div id="resText" >
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function(){
$('#send').click(function() {
$.getJSON('test.json', function(data) {
$('#resText').empty();
var html = '';
$.each( data , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})
$('#resText').html(html);
})
})
})
</script>
</head>
<body>
<br/>
<p>
<input type="button" id="send" value="加载"/>
</p>
<div class="comment">已有评论：</div>
<div id="resText" >
</div>
</body>
</html>
4. $.ajax()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function(){
$('#send').click(function() {
$.ajax({
type: "GET",
url: "test.json",
dataType: "json",
success : function(data){
$('#resText').empty();
var html = '';
$.each( data , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})
$('#resText').html(html);
}
});
});
})
</script>
</head>
<body>
<br/>
<p>
<input type="button" id="send" value="加载"/>
</p>
<div class="comment">已有评论：</div>
<div id="resText" >
</div>
</body>
</html>
5. serialize()方法，序列化元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){
$("#send").click(function(){
$.get("get.aspx", $("#form1").serialize() , function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
</script>
</head>
<body>
<form id="form1">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" ></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>
<div class='comment'>已有评论：</div>
<div id="resText" >
</div>
</body>
</html>
6. AjaxEvent 全局事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
#loading{
width:80px;
height: 20px;
background:#bbb;
color:#000;
display:none;
}
img{border:0;height:100px;width:100px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function(){
//demo1:
$('#send1').click(function() {
$.getJSON("test.json",function(data){
$("#resText1").empty();
$.each(data.items, function( i,item ){
$("<img/> ").attr("src", item.media.m ).appendTo("#resText1");
if ( i == 3 ) {
return false;
}
});
}
);
}); //demo2:
$("#send2").click(function(){
$.get("get.aspx", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText2").html(data); // 把返回的数据添加到页面上
}
);
}) //共用这2个全局的ajax事件
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxStop(function(){
$(this).hide();
});
})
</script>
</head>
<body>
<br/>
<div id="loading">加载中...</div>
<br/>
Demo1:
<br/>
<input type="button" id="send1" value="加载"/>
<div id="resText1" ></div>
<br/>
Demo2:
<br/>
<form id="form1">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" ></textarea></p>
<p><input type="button" id="send2" value="提交"/></p>
</form>
<div class='comment'>已有评论：</div>
<div id="resText2" >
</div>
</body>
</html>
PS：参考文献《锋利的jQuery》
