第八章 jQuery与Ajax应用

时间：2023-03-08 17:27:34

　　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》

相关文章