• JQuery-Ajax


            /*
             * 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"
            });
  • 相关阅读:
    Powerdesigner数据库建模--概念模型--ER图【转】
    oralce闪回
    DBA
    linux socket使用经验总结
    寒假学习笔记1:结构化程序设计
    寒假作业2:简化电梯设计elevator
    鹤发银丝映日月,丹心热血沃新花——忆三位良师
    走廊泼水节
    种树
    P2938 [USACO09FEB]股票市场Stock Market
  • 原文地址:https://www.cnblogs.com/nemoro1928/p/5424454.html
Copyright © 2020-2023  润新知