程序博客网 > 虚拟机linux怎么上网

jQuery 06 Ajax

来源：互联网 发布：虚拟机linux怎么上网 编辑：程序博客网 时间：2024/04/30 06:29
jQuery对 Ajax进行封装，在jQuery中$.ajax()方法是属于最底层的方法，第2层是load(),$.get(),$post(),第3层是$.getScript()和$.getJSON()
load()，是最常用的Ajax方法，能载入远程的HTML代码并插入DOM中
load(url,[,data][,callback])

<script language="javascript" type="text/javascript">
  $(function(){
       $("#send").click(function(){
                 $("#resText").load("test.html");
       })
  })
</script>

只加载指定的元素，可以在url参数后筛选指定元素
<script language="javascript" type="text/javascript">
  $(function(){
       $("#send").click(function(){
                 $("#resText").load("test.html .para");
       })
  })
</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>
<script language="javascript" >
     $(function(){
        $("#send").click(function(){
               $("#resText").load("get1.jsp?username="+$('#username').val()+"&content="+$('#content').val())
        });//中文也需要编码
     })
</script>
<script language="javascript" >
     $(function(){
        $("#send").click(function(){
               $("#resText").load("post1.jsp",{
                              username :  $("#username").val() ,
                              content :  $("#content").val() 
                 }); //中文不需要编码
        })
     })
</script>
$.get()
$.get(url,[,data][,callback][,type])
url请求的HTML的URLdatakey/value数据callback载入成功后的回调函数，只有response的返回状态是success才调用type返回内容格式:xml,html,script,json,text,default
<script language="javascript" >
     $(function(){
        $("#send").click(function(){
               $.get("get1.jsp", {
                              username :  encodeURI( $("#username").val() ) ,
                              content :   encodeURI( $("#content").val() )
                         }, function (data, textStatus){
                         // 只在success 时才调用
                         //textStatus 请求状态：success,error,notmodified,timeout
                        $("#resText").html(decodeURI(data) ); // 把返回的数据添加到页面上
                         }
               );
        })
     })
</script>
<%
  String username = request.getParameter("username");
  String content = request.getParameter("content");
  out.println("<div class='comment'><h6> "+username+" :</h6><p class='para'> "+content+" </p></div>");
%>
返回xml格式
<script language="javascript" >
     $(function(){
        $("#send").click(function(){
               $.get("get2.jsp", {
                              username :  encodeURI( $("#username").val() ) ,
                              content :   encodeURI( $("#content").val() )
                         }, function (data, textStatus){
                             var username = $(data).find("comment").attr("username");
                              var content = $(data).find("comment content").text();
                              username =  decodeURI(username);
                              content = decodeURI(content);
                             var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                             $("#resText").html(txtHtml); // 把返回的数据添加到页面上
                         },"xml");
        })
     })
</script>
  response.setContentType("text/xml");
  out.println("<?xml version='1.0' encoding='UTF-8'?>");
  out.println("<comments>");
  out.println("<comment username='"+username+"'>");
  out.println("<content>"+content+"</content>");
  out.println("</comment>");
  out.println("</comments>");
JSON文件
<script language="javascript" >
     $(function(){
        $("#send").click(function(){
               $.get("get3.jsp", {
                             username :  encodeURI( $("#username").val() ) ,
                              content :   encodeURI( $("#content").val() )
                         }, function (data, textStatus){
                             var username = data.username;
                              var content = data.content;
                              username =  decodeURI(username);
                              content = decodeURI(content);
                             var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                        $("#resText").html(txtHtml); // 把返回的数据添加到页面上
                         },"json");
        })
     })
</script>
out.println("{ \"username\" : '"+username+"' , \"content\" : '"+content+"'}");
$.post()
<script language="javascript" >
     $(function(){
        $("#send").click(function(){
               $.post("post1.jsp", {
                              username :  $("#username").val() ,
                              content :  $("#content").val() 
                         }, function (data, textStatus){
                        $("#resText").html(data); // 把返回的数据添加到页面上
                         }
               );
        })
     })
</script>
out.println("<div class='comment'><h6> "+username+" :</h6><p class='para'> "+content+" </p></div>");
<script language="javascript" >
     $(function(){
        $("#send").click(function(){
               $.post("post2.jsp", {
                              username :  $("#username").val() ,
                              content :  $("#content").val() 
                         }, function (data, textStatus){
                             var username = $(data).find("comment").attr("username");
                              var content = $(data).find("comment content").text();
                             var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                        $("#resText").html(txtHtml); // 把返回的数据添加到页面上
                         },"xml");
        })
     })
</script>
  response.setContentType("text/xml");
  out.println("<?xml version='1.0' encoding='UTF-8'?>");
  out.println("<comments>");
  out.println("<comment username='"+username+"'>");
  out.println("<content>"+content+"</content>");
  out.println("</comment>");
  out.println("</comments>");
<script language="javascript" >
     $(function(){
        $("#send").click(function(){
               $.post("post3.jsp", {
                              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>
$.getScript(),直接加载js文件
<script>
   $(function(){
             $.getScript('jquery.color.js',function(){
                     $("<p>加载JavaScript完毕</p>").appendTo("body");
                      $("#go").click(function(){
                            $(".block").animate( { backgroundColor: 'pink' }, 1000)
                                       .animate( { backgroundColor: 'blue' }, 1000);
                      });
               });
   })
   </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>

test.json：
[
  {
    "username": "张三",
    "content": "沙发."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
]
 <script>
   $(function(){
        $('#send').click(function() {
            $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
                           function(data){
                                $.each(data.items, function(i,item ){
                                        $("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");
                                        if ( i == 3 ) {
                                             return false;
                                        }
                               });
                       }
              );
       })
   })
   </script>

$.ajax(),是jQuery最底层的Ajax实现。
$.ajax(options)
方法只有1个参数，key/value的形式存在，所有参数都是可选的
url type
POST/GET
timeout设置请求超时时间(毫秒),此设置将覆盖$.ajaxSetup()方法的全局设置data数据。dataType预期返回的数据类型，如果不指定，将根据HTTP包的MIME信息返回responseXML或responseText,并作为回调函数参数传递
xml,htmk,script,json,jsonp,textbeforeSend发送请求前可以修改XMLHttpRequest对象，例如添加自定义HTTP头。在beforeSend中返回false，可以取消本次Ajax请求。
function(XMLHttpRequest){
    this; //调用本次Ajax请求时传递的options参数
}complete请求完成后调用的回调函数（成功或失败时均调用）。
function(XMLHttpRequest,textStatus){
    this; //调用本次Ajax请求时传递的options参数
}
success成功后调用
function(data,textStatus){
    this; //调用本次Ajax请求时传递的options参数
}
error失败时调用
function(XMLHttpRequest,textStatus,errorThrown){
//通常情况下textStatus和errorThrown只有一个包含信息
    this; //调用本次Ajax请求时传递的options参数
}
global默认为true。表示是否触发全局Ajax事件。设置为false将不会触发。
 <script>
   $(function(){
        $('#send').click(function() {
            $.ajax({
                 type: "GET",
                 url: "test.js",
                 dataType: "script"
               });
        });
   })
   </script>
test.js
var comments = [
  {
    "username": "张三",
    "content": "沙发."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
];
  var html = '';
  $.each( comments , function(commentIndex, comment) {
      html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
  })
  $('#resText').html(html);
 <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>
 <script>
   $(function(){

        $('#send').click(function() {
            $.ajax({
                 type: "GET",
                 url: "http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
                 dataType: "jsonp",
                 success : function(data){
                                $.each(data.items, function( i,item ){
                                        $("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");
                                        if ( i == 3 ) {
                                             return false;
                                        }
                               });
                    }
               });
        });
   })
   </script>
jQuery1710028403484120225975_1374674876860({
          "title": "Recent Uploads tagged car",
          "link": "http://www.flickr.com/photos/tags/car/",
          "description": "",
          "modified": "2013-07-24T14:03:55Z",
          "generator": "http://www.flickr.com/",
          "items": [
        {
               "title": "1/24 スポーツカー No.78 1/",
               "link": "http://www.flickr.com/photos/98196270@N08/9356513851/",
               "media": {"m":"http://farm3.staticflickr.com/2817/9356513851_1b5f24de4a_m.jpg"},
               "date_taken": "2013-07-24T07:03:55-08:00",
               "description": " <p><a href=\"http://www.flickr.com/people/98196270@N08/\">unioh5181<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/98196270@N08/9356513851/\" title=\"1/24 スポーツカー No.78 1/\"><img src=\"http://farm3.staticflickr.com/2817/9356513851_1b5f24de4a_m.jpg\" width=\"240\" height=\"148\" alt=\"1/24 スポーツカー No.78 1/\" /><\/a><\/p> <p>【評価】5.0【レビュー数】1 URL→<\/p>",
               "published": "2013-07-24T14:03:55Z",
               "author": "nobody@flickr.com (unioh5181)",
               "author_id": "98196270@N08",
               "tags": "car"
        },
        {
               "title": "Drive it",
               "link": "http://www.flickr.com/photos/dousa/9359298652/",
               "media": {"m":"http://farm8.staticflickr.com/7314/9359298652_6252cffd1f_m.jpg"},
               "date_taken": "2013-07-20T13:31:36-08:00",
               "description": " <p><a href=\"http://www.flickr.com/people/dousa/\">David Douša<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/dousa/9359298652/\" title=\"Drive it\"><img src=\"http://farm8.staticflickr.com/7314/9359298652_6252cffd1f_m.jpg\" width=\"240\" height=\"159\" alt=\"Drive it\" /><\/a><\/p> ",
               "published": "2013-07-24T14:05:27Z",
               "author": "nobody@flickr.com (David Douša)",
               "author_id": "92994565@N04",
               "tags": "red chevrolet car corvette"
        }
        ]
})
serialize()，序列化元素可以吧DOM元素内容序列化为字符串，用于Ajax请求。
<script language="javascript" >
     $(function(){
        $("#send").click(function(){
               $.post("get1.jsp", $("#form1").serialize() , function (data, textStatus){
                        $("#resText").html(data); // 把返回的数据添加到页面上
                         }
               );
        })
     })
</script>
<script language="javascript" >
     $(function(){
        $("#send").click(function(){
               var $data =  $(":checkbox,:radio").serialize();
            alert( $data );
        })
     })
</script>
serializeArray(),可以序列化为JSON格式数据
  <script type="text/javascript">
   $(function(){
          var fields = $(":checkbox,:radio").serializeArray();
          console.log(fields);// Firebug输出
          $.each( fields, function(i, field){
              $("#results").append(field.value + " , ");
          });
   })
   </script>
$.param()，可以对数组或对象按照key/value进行序列化。
<script type="text/javascript">
//<![CDATA[
     $(function(){
            var obj={a:1,b:2,c:3};
          var  k  = $.param(obj);
          alert(k)        // 输出  a=1&b=2&c=3
     })
//]]>
</script>
jQuery 提供一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。Ajax请求开始时，触发ajaxStart().请求结束时，触发ajaxStop().这些方法都是全局的。
<script>
   $(function(){
    //demo1:
        $('#send1').click(function() {
            $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
                           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(){
               $.post("get1.jsp", {
                              username :  $("#username").val() ,
                              content :  $("#content").val() 
                         }, function (data, textStatus){
                        $("#resText2").html(data); // 把返回的数据添加到页面上
                         }
               );
        })

          $.ajaxPrefilter(function( options ) {
               options.global = true;
          });
          //共用这2个全局的ajax事件
        $("#loading").ajaxStart(function(){
           $(this).show();
        });
        $("#loading").ajaxStop(function(){
           $(this).hide();
        });


   })
   </script>
ajaxComplete(callback)请求完成时执行ajaxError(callback)请求发生错误是执行ajaxSend(callback)请求发送前执行ajaxSuccess(callback)
请求成功时执行

如果在执行Ajax方法时，不想触发全局方法可以在使用$.ajax(options)时，将参数中的global设置为false。
$.ajax({
          url:"test.html",
          global:false          
});
在jQuery1.5版本之后，可以用
$.ajaxPrefilter(function( options ) {
               options.global = true;
          });


虚拟机linux怎么上网 虚拟机linux怎么上网
原创粉丝点击
热门IT博客
淘宝网吉他淘宝网吉他
关于网络暴力关于网络暴力
刀锋铁骑高6顽强数据
手机网络加速器翻墙
js获取map对象长度
mac电脑如何管理文件
淘宝女旅游鞋图片价格
c语言实现多线程同步
少女前线数据清空
mac系统怎么复制粘贴
mysql 临时表空间大小
使用迅雷下载网络异常
linux date 修改时间
mp4高清播放软件
sql 删除数据库
python for怎么用
ubuntu 14.04 镜像源
怎样才能成为淘宝会员
windows调整分区工具
樱井知香的喷泉番号
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 四川旅游多少钱 四川旅游点 四川著名旅游景点 四川旅行攻略 四川旅游攻略自由行 春熙路附近美食 春熙路酒店 机场 酒店大全 飞机查询 四川酒店 飞机订票 附近旅游 四川旅游必去的景点 银海 想旅游 教育培训中心 春熙路美食 四川旅游路线 春熙路有什么好玩的 蒲江招聘 会议厅 四川双流 青春斗取景地成都 女白领发量剩3成 月经量少成褐色 成量工具集团有限公司 成都成量工具集团有限公司 成量 25岁女白领发量只剩3成 智慧成铁 运去金成铁 智慧成铁app 点金成铁 成铁 智慧成铁职工个人app 智慧成铁铁路职工app二维码 智慧成铁职工app手机版 成铁智慧职工app下载 智慧成铁职工个人app二维码 四川广播电视大学成铁直属部

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里