jquery +ajax 关于contentType的一些说明

项目中经常用到jquery下面说下ajax请求,

首先是get请求,这个比较简单,这里主要说的post请求有两种方式

一种是不带contentType参数的例如下面代码:

前端代码如下:

function deleteOne1(id) {
    alert("111")
    alert(id);
    var data1 = {"id":id};
    //var data = JSON.stringify(data1);
    $.ajax({
        type: "post",
        url: "/user/delete",
        data: data1,
        //contentType: "application/json",
        dataType:"json",
        success: function (result) {
          alert(result.res);
        },
        error:function () {
            alert("false");
        }
    });
}

后台的java代码如下:

@PostMapping("/delete")
@ResponseBody
public Map<String,Object> delete(@RequestParam("id") String id){
    service.delete(Long.parseLong(id));
    Map<String,Object>res= new HashMap<>();
    res.put("res","success");
    return res;
}

这两个结合tomcat可以很愉快的工作.

第二种方式是使用contentType则前端的代码如下:

function deleteOne(id) {
    alert("111")
    alert(id);
    var data1 = {"id":id};
    var data = JSON.stringify(data1);//这里注意必须要用JSON的stringify方法来操作,否则后台不能接收
    $.ajax({
        type: "post",
        url: "/user/delete1",
        data: data,
        contentType: "application/json",
        dataType:"json",
        success: function (result) {
         alert(result.res);
        },
       error:function () 
       { 
            alert("false"); 
       }
    });
}

则后台的代码如下:

@PostMapping("/delete1")
@ResponseBody
public Map<String,Object> delete1(@RequestBody Map<String,Object>map){
    if(map!=null) {
        String id = map.get("id").toString();
        service.delete(Long.parseLong(id));
    }
    Map<String,Object>res= new HashMap<>();
    res.put("res","success");
    return res;
}

这里注意:后台需要用@RequestBody来接收传递的参数,可以是实体,也可是map

根本的原因是如果不使用contentType这个参数,浏览器会自动的使用

Content-Type: application/x-www-form-urlencoded; charset=UTF-8 这种方式接收:实际上后台接收的方式和get方法的参数一样

都为: id=1&name=xiaoli 这样类似的方法.

要是使用了contentType会给浏览器定义后台的接收方式:Content-Type: application/json;charset=UTF-8  以这样的模式接收,则参数的形式为{id:1,name:xiaoli},所以后台必须 @RequestBody 这个注解.