zoukankan      html  css  js  c++  java
  • ajax学习总结

    $.ajax()是所有ajax方法中最底层的方法,其它的方法都是基于$.ajax()方法的封装。
    这个方法只需要传一个参数对象{},里面都是键值对。
    键值对有多个的情况下用逗号分隔,最后一个不要加逗号。
    data属性值一般用对象键值对的方式data:{a:4,b:5}

    ajax用的最多的就是表单提交,

    ajax的两种提交方式:1表单提交 2json字符串提交,使用JSON.stringify(data)

     JSON对象的方法:

    JSON.stringify 把一个对象转换成json字符串,
    JSON.parse 把一个json字符串解析成对象。  jquery的方法为:$.parseJSON(str);

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <script>
    一、传统的表单提交,缺点:表单元素特别多的情况下,写起来麻烦,容易出错。
    $(function(){
    $("form input[type=submit]").click(function(){
    $.ajax({
    type:"post",
    url:"",
    data:{
    user:$("form input[name=user]").val(),
    email:$("form input[name=email]").val()
    },
    success:function(response,status,xhr){
    $("#box").html(response);
    }
    });
    });

    });
    二、表单序列化方式:如果有多个表单的情况下,在复制的时候,data就不用修改了。序列化之后的data为字符串形式的键值对,还进行了编码,保证了准确性。
    $(function(){
    $("form input[type=submit]").click(function(){
    $.ajax({
    type:"post",
    url:"",
    data:$('form').serialize(),
    success:function(response,status,xhr){
    $("#box").html(response);
    }
    });
    });

    });
    三、对单选框、复选框、下拉框进行的序列化:
    $("form input[name=sex]").click(function(){
    $(this).serialize();//用于提交时的序列化
    decodeURIComponent($(this).serialize());//解码
    });
    四、怎样生成json数据:
    $("form input[name=sex]").click(function(){
    $(this).serializeArray();//生成的是json数据
    var json= $(this).serializeArray();
    $("box").html(json[0].name+"="+json[0].value);
    }

    五、初始化重复的属性:
    $.ajaxSetup({
    type:"post",
    data:$("form").serialize(),
    success:function(){
    alert("请求成功后");
    },
    complete:function(){
    alert("请求结束后,不管成功还是结束");
    },
    beforeSend:function(){
    alert("发送请求之前");
    },
    error:function(){
    alert("请求失败后");
    }
    });
    $.ajax({
    这里就不用重复上面的属性了……
    });

    六、data属性值如果是复杂的对象键值对,程序难以解析,这时可以用$.param()方法,将对象转化为字符串键值对格式。param() 方法创建数组或对象的序列化表示。
    该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。
    data:$.param({user:$("form input[name=user]").val(),
    email:$("form input[name=email]").val()
    }),
    ...
    七、全局事件$(document).ajaxStar()和$(document).ajaxStop();当请求开始时,显示“正在加载中”,请求结束时隐藏。
    $(document).ajaxStart(function(){
    $(".loading").show();
    }).ajaxStop(function(){
    $(".loading").hide();
    });
    全局事件:
    $(document).ajaxError(function(){
    alert("错误!");
    });

    八、如果请求时间太长,可以设置超时:
    $.ajax({
    type:"",
    url:"",
    ...
    timeout:180000 //3分钟(1000毫秒=1秒)
    //超时后的处理:
    error : function(xhr,textStatus){
    if(textStatus=='timeout'){
    //处理超时的逻辑
    }else{
    //其他错误的逻辑
    }
    }
    });
    九、如果某个ajax不想触发全局事件,可以在当前的ajax里设置:
    $.ajax({

    global:false
    });

    十、跨域请求时,设置返回数据格式为jsonp:
    $.ajax({
    dataType:"jsonp"
    });

    十一、jqXHR对象
    jqXHR对象就是$.ajax()返回的对象
    var jqXHR=$.ajax({
    type:"post",
    url:"",
    data:$('form').serialize()
    });//上面只是一些基本的参数,与真正要执行的程序分开来,提高了可读性。
    jqXHR.success(function(response){
    alert(response);
    });
    之前的一些方法:.success() .complete() .error()在未来可能会被取消,代替的方法为:
    .done() .always() .fail()
    所以,如果使用jqXHR对象的话,最好采用后面的方法。
    好处:1、可连缀执行 2、课多次执行同一个函数,前面的不会被后面的覆盖。

    </script>
    <body>
    <form action="">
    <input type="text" name="user">
    <input type="text" name="email">
    <input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女
    <input type="submit" value="提交">
    </form>
    <span class="loading" style="display:none">正在努力加载中……</span>
    <div id="box"></div>
    </body>
    </html>

  • 相关阅读:
    bzoj 3709: [PA2014]Bohater【贪心】
    bzoj 3714: [PA2014]Kuglarz【最小生成树】
    bzoj 2216: [Poi2011]Lightning Conductor【决策单调性dp+分治】
    bzoj 2087: [Poi2010]Sheep【凸包+极角排序+dp】
    bzoj 3830: [Poi2014]Freight【dp】
    bzoj 3930: [CQOI2015]选数【快速幂+容斥】
    bzoj 1717: [Usaco2006 Dec]Milk Patterns 产奶的模式【后缀自动机】
    bzoj 1614: [Usaco2007 Jan]Telephone Lines架设电话线【二分+spfa】
    bzoj 1640||1692: [Usaco2007 Dec]队列变换【后缀数组】
    bzoj 1612: [Usaco2008 Jan]Cow Contest奶牛的比赛【Floyd】
  • 原文地址:https://www.cnblogs.com/annie211/p/6028237.html
Copyright © 2011-2022 走看看