zoukankan      html  css  js  c++  java

  • 第八章 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》
  • 相关阅读:
    Django多表操作
    Django单表操作
    Django模板语言的复用
    DTL
    Django视图层、虚拟环境
    Django路由详解
    初识Django
    web框架
    JQ初级
    linux的基础配置命令
  • 原文地址：https://www.cnblogs.com/shuibing/p/4111086.html
Copyright © 2011-2022 走看看