首页 > 代码库 > 第八章 jQuery与Ajax应用
第八章 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》
第八章 jQuery与Ajax应用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。