首页 > 代码库 > 第八章 jQuery与Ajax应用

第八章 jQuery与Ajax应用

http://www.cnblogs.com/shuibing/p/4111086.html

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="http://www.mamicode.com/提交"/></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="http://www.mamicode.com/提交"/></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="http://www.mamicode.com/加载"/><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="http://www.mamicode.com/提交"/></p></form><div  class=‘comment‘>已有评论:</div><div id="resText2" ></div></body></html>

第八章 jQuery与Ajax应用