码迷,mamicode.com
首页 > Web开发 > 详细

JQuery-Ajax

时间:2016-04-23 14:51:19      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:

        /*
         * 0.    $.ajax()
         * $(‘#btn‘).click(function(){
                var data = $(‘input[name=go]‘).val();
                $.ajax({
                    url: "ajax.php",
                    type:"POST",
                    data:{‘data‘ : data},
                    success: function(msg){
                      if(msg){
                          $(‘input[name=back]‘).val(‘走服务器返回的输入值为:‘+msg);
                      }
                    }
                });
            });
         */
        
        
        /*
         * 1.    jQueryload(url, [data], [callback])
         * url:待装入 HTML 网页网址。
         * data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
         * callback:载入成功时回调函数。
         */

        $(#btn1).click(function(){    //    加载外部js
            $(#div1).load("js/test.js")
        });
        
        $(#btn2).click(function(){    //    加载外部html,并筛选class="product"显示
            $(#div2).load("js/test.html .product",function(){
                console.log("完成")
            },html)
        });

        
        
        /*
         * 2.    jQuery.post(url, [data], [callback], [type])
         * url:        发送请求地址。
         * data:        待发送 Key/value 参数,{ name:"LYX", time:"2pm" }
         * callback:    发送成功时回调函数。
         * responseText:    请求返回的内容
         * textStatus:        请求状态:success,error,notmodified,timeout
         *         XMLHTTPRequest:    XMLHTTPRequest对象
         *         type:    返回内容格式.
         *             xml, html, script, json, text, _default.
         * "js/test.html .product" :表示筛选出product类传输,load()方法中,有参数会默认post,没有参数默认get
        */
        
        $(#btn3).click(function(){
            var data = $(#txt3).val();
            $.post(
                post.php,
                {data : data},
                function(data,textStatus){
                    console.log("textStatus的值为: "+textStatus);
                    $(#div3>span).html("post服务器返回的data: "+data)
                    console.log(data)
                })
        });
        
        
        
        /*
         * 3.    jQuery.get(url, [data], [callback], [type])
         * url:        发送请求地址。
         * data:        待发送 Key/value 参数。
         * callback:    发送成功时回调函数。
         *         data:    请求返回的内容
         *         textStatus:        请求状态:success,error,notmodified,timeout
         * type:    返回内容格式.
         *         xml, html, script, json, text, _default.
         * 注意返回格式:HTML,XML,JSON
         */
        
        $(#btn4).click(function(){
            var data = $(#txt4).val();
            $.get(
                get.php,
                {data : data},
                function(data,textStatus){
                    console.log("textStatus的值为: "+textStatus);
                    $(#div4>span).html("get服务器返回的data: "+data)
                    console.log(data)
                })
        });
        
        /*
         * 4.    getJSON获取json文件
         */
        $(#btn5).click(function(){
            $.getJSON(address.json,function(data){
                $.each(data, function(index,elem) {
                    $(#div5>span).append(<b>+elem[name]+    </b>);
                });
            })
        });
        
        
        /*
         * 5.    $.getScript()    可用于延迟加载script
         *         测试失败
         */
        
        
        $(#btn6).click(function(){
            $.getScript("http://www.imooc.com/data/sport_f.js",function(){
                //抓取外部的script
            })
        });
        
        /*
         * 6.    $.ajax()底层的Ajax实现,以上的方法都能用$.ajax()实现
         */
        
        $.ajax({
            type:"get",
            url:"",
            async:true
        });
        
        
        /*
         * 7.    serialize()方法 序列化你的表单
         */
        $(#btn7).click(function(){
            $.get(
                get.php,
                
                //{data:$(‘#username‘).val()},
                $(#form1).serialize(),
                
                function(data,textStatus){
                    console.log(    $(#form1).serialize()        )    
                    //序列化表单    username=11111&content=aaaaa
                    console.log(    $(#form1).serializeArray())    
                    //数组化表单    [{name:username,value:11111},{name:content,value:aaaaa}]
                }
            )
            
        });
        
        
        /*
         * 8.    ajax中的全局函数
         *         $().ajaxComplete()
         *         $().ajaxStart()
         *         $().ajaxStop()
         *         $().ajaxError()
         *         $().ajaxSend()
         *         $().ajaxSuccess()
         *         如果不想ajax被全局影响,设置global:false
         */
        $(#btn8).click(function(){
            $.ajax({
                url: "post.php",
                type:"POST",
                data:{data : $(#txt8).val()},
                beforeSend:function(){
                    $(#div8>span).append(<b>+1.beforeSend+ </b>);
                 },
                   success: function(data){
                    $(#div8>span).append(<b>+2.success:+data+ </b>);
                  },
                  error:function(){
                    $(#div8>span).append(<b>+3.error+ </b>);
                  },
                  complete:function(){
                    $(#div8>span).append(<b>+4.complete+ </b>);
                  }
            });
        });
        
        /*
         * 9.    统一设置ajax的属性
         */
        $.ajaxSetup({
              url: "/xmlhttp/",
              global: false,
              type: "POST"
        });

 

JQuery-Ajax

标签:

原文地址:http://www.cnblogs.com/nemoro1928/p/5424454.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!