jquery关于ajax那些事

2020年06月28日 未雨晴空 1评论 719阅读 2喜欢

前言

最近在公司做项目时,前端ajax交互用到的比较多,才发现自己对ajax一知半解,好多概念还没有搞清楚,故整理该篇文章以待日后翻阅。

常用的ajax请求方式

  • $.ajax({name:value, name:value, … })

    只有一个参数且该参数是一组key/value对象,包含各选项及回调函数信息。

      $.ajax({
          type: "post",
          url: 'http://www.example.com/user/query',
          data:{username:"zhangsan"},
          success: function (data) {console.log(data);}
      });
    
  • $.get(url,data,function(data,status,xhr),dataType)
参数 描述
url 必需。请求URL。
data 可选。请求数据。
success 可选。当请求成功时运行的函数;函数形式:function(data,status,xhr){…},其中参数data表示服务器返回的数据;status表示请求的状态;xhr表示XMLHttpRequest 对象
dataType 可选。预期的服务器响应的数据类型。默认jQuery 会根据请求响应头智能判断
$.get(
    "http://www.example.com/user/query",
    {username: "zhangsan"},
    function(data){
        alert(data);
    }
);
  • $.post(url,data,function(data,status,xhr),dataType)
参数 描述
url 必需。请求URL。
data 可选。请求数据。
success 可选。当请求成功时运行的函数;函数形式:function(data,status,xhr){…},其中参数data表示服务器返回的数据;status表示请求的状态;xhr表示XMLHttpRequest 对象
$.post(
    "http://www.example.com/user/query",
    {username: "zhangsan"},
    function(data){
        alert(data);
    }
    })
  • $.getJSON(url,data,success(data,status,xhr))
参数 描述
url 必需。请求URL。
data 可选。请求数据。
success 可选。当请求成功时运行的函数;函数形式:function(data,status,xhr){…},其中参数data表示服务器返回的数据;status表示请求的状态;xhr表示XMLHttpRequest 对象
$.getJSON(
    "http://www.example.com/user/query?username=zhangsan",
    function(data){
        console.log(data);
    }
);

ajax请求简单参数解释

参数 描述
url 请求地址
type 请求类型,默认get
timeout 请求超时时间
async 是否异步请求,默认为true
cache 是否从缓存中加载请求信息,默认为true
dataFilter 该参数是对ajax返回的原始数据进行预处理,提供data和type两个参数。data是Ajax返回的原始数据,type则是dataType参数。
beforeSend 发送请求前运行的函数,函数形式:function(data,status,xhr){…},其中参数data表示服务器返回的数据;status表示请求的状态;xhr表示XMLHttpRequest 对象。若函数返回false可以取消本次ajax请求
success 当请求成功时运行的函数,函数形式同上面的beforeSend
error 如果请求失败要运行的函数,函数形式同上面的beforeSend
complete 请求完成时运行的函数(在请求成功或失败之后均调用),函数形式同上面的beforeSend
ifModified 若为true则表示仅在服务器数据改变时获取新数据。默认为false,即忽略头信息。服务器数据改变判断的依据是Last-Modified头信息
username 要求为String类型的参数,用于响应HTTP访问认证请求的用户名
password 要求为String类型的参数,用于响应HTTP访问认证请求的密码
scriptCharset 规定请求的字符集。
jsonp 在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分。
global 表示是否触发全局ajax事件,要求为Boolean类型的参数,默认为true

ajax请求重要参数解释

  • data

    Object或String类型的参数,发送到服务器的数据。如果不是字符串,将自动转换为字符串格式
    get请求中会将参数序列化附加在url后。例如{username:”jack”,age:”18”}转换为&username=jack&age=18附加在请求url后面。如果需要防止这种自动转换,可以设置processData(防止自动转换)为false。

  • dataType

    这个是预期服务器返回的数据类型,而不是你发送给服务器的数据类型。如果不指定,jquery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:

    • xml:返回XML文档
    • html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
    • script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
    • json:返回JSON数据。
    • jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
    • text:返回纯文本字符串。
  • contentType:

    内容编码类型默认为”application/x-www-form-urlencoded”。该默认值适合大多数应用场合。

  • processData:

    默认为true的情况下,发送的数据将被转换为对象(即&username=jack&age=18这样的形式),以配合默认内容类型”application/x-www-form-urlencoded”。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。processData 默认为true,当设置为false的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data

ajax请求头添加Content-Type的两种方式

  • 方式一
          $.ajax({
              type: "post",
              url: 'http://www.example.com/user/query',
              data:{username:"zhangsan"},
              contentType:"application/json",
              success: function (data) {console.log(data);}
          }
          });
    
  • 方式二:
          $.ajax({
              type: "post",
              url: 'http://www.example.com/user/query',
              data:{username:"zhangsan"},
                 beforeSend:function (xhr) {
                          xhr.setRequestHeader("Content-Type", "application/json");      
                  },
              success: function (data) {console.log(data);}
          }
    

    application/x-www-form-urlencoded 和 application/json 两种类型的数据的区别

    ajax 请求默认使用contentType等于"application/x-www-form-urlencoded"这种格式的特点就是如果你的请求数据是简单的json对象类型如data:{username:"zhangsan",age:18}则也会被ajax会序列化成user=张三&age=18 这种形式发送到服务端,需要注意一点这种转换时只能识别json对象类型,不能识别json字符串类型,如果是get请求则附在在请求url后面而 post 请求则是使用请求体,参数不在请求url 中,在请求体中的参数表现形式也是 user=zhangsan&age=18 的形式。
    当contentType等于"application/json"时,这表示发送的数据是json格式的字符串,如果ajax中设置为该类型,则发送的json对象必须要使用JSON.stringify进行序列化成字符串才能和设定的这个类型匹配。

Spring如何接收ajax传递的数据

contentType没有设置即表示采用ajax默认的"application/x-www-form-urlencoded",后台可通过以下方式获取参数

  • 原生的Servlet使用request.getParameter(“user”)获取参数;
  • spring mvc中框架可自动根据参数名进行匹配,即表单元素的name属性和接收参数的名称一样时即可自动匹配;如果不一样,还可以使用@RequestParam,@ModelAttribute以及@RequestBody 的方式匹配。

contentType设置成即"application/json",后台可通过以下方式获取参数

  • 需要使用@RequestBody来注解,这样才能将发送过来的json字符串解析绑定到对应的 pojo 属性上。另外,需注意一点,json字符串在书写时名称部分需要加上“”双引号,以免一些json解析器无法识别。

ajax如何传递multipart/form-data类型数据

解决这个问题需要用到FormData,该对象用以将数据编译成键值对的形式来发送数据。一般都是用于发送表单数据,但也可以用于手动构造键值对数据,而独立于表单使用。

var avatar=$("input[type='file']")[0];
var formData = new FormData();
formData.append("username", "zhangsan");
formData.append("password",123456789);
formData.append("avatar", avatar.files[0]);
    $.ajax({
        url:'http://www.example.com/user/avatar/upload/',
        dataType:'json',
        type:'POST',
        data: formData,
        processData : false, // 关闭默认的数据处理即不做处理
        contentType : false, // 不要默认设置Content-Type请求头
        success: function(data){
            console.log(data);
        },
        error:function(response){
            console.log(response);
        }
    });

ajax请求数据中文编码问题

如果你是通过form提交的,那就不需要对参数进行编码,但是如果是由ajax发送请求到后台的,就需要对参数进行encodeURI编码,否则,会导致后台出现各种乱码。

  • url中参数处理

    如果参数是通过URL传递那么需要编码两次;第一次编码是对中文进行编码;第二次是对转码后的%进行编码处理;

      //encodeURI("张三")="%E5%BC%A0%E4%B8%89"`;
      //encodeURI("%E5%BC%A0%E4%B8%89")="%25E5%25BC%25A0%25E4%25B8%2589"
      var username=encodeURI(encodeURI("张三"))
      $.ajax({
              type: "get",
              url: 'http://www.example.com/user/query?username='+username,
              success: function (data) {console.log(data);}
          }
      });
    
  • 请求体中参数处理

    如果是请求体中含有中文参数,那么只需要编码一次即可。

      $.ajax({
              type: "get",
              url: 'http://www.example.com/user/query',
              data:{username:encodeURI("张三")}
              success: function (data) {console.log(data);}
          }
      });
    

    是那么后台在获取到参数需要通过URLDecoder.decode(username,"utf-8");进行解码即可。

  1. linjj1020
    2020-06-30 23:06:45

    66666666666666666

    回复

发表评论 取消回复

电子邮件地址不会被公开。

请输入以http或https开头的URL,格式如:https://oneisall.top