后端与前端Ajax交互

接口方法统一用@ResponseBody处理返回json数据

如果单传一个String类型，dataType 用 text ; 传对象和集合用 json ;

Ajax给外部赋值 需要设置 async:false, 

填坑：必须注明[]，有的地方会接收不到，后端接收数组 @RequestParam("ids[]") List<String> ids 

---

一、多部分文件上传

(@RequestParam(value = "files",required = false) MultipartFile[] files,@RequestParam(value = "id",required = false) Integer id)


    @PostMapping("editWorkExperience")
    public int editWorkExperience(@RequestParam Map<String, Object> params, HttpServletRequest request){
        WorkExperience workExperience = JSON.parseObject(JSON.toJSONString(params), WorkExperience.class);
        MultipartFile file = ((MultipartHttpServletRequest)request).getFile("dimissioCertificate");

 表单：

<form id="ff" method="post"  enctype="multipart/form-data">
        <input type="file" name="files"/>
        <input type="file" name="files"/>
</form>

Ajax方法：

              var formData = new FormData($('#ff')[0]);//新建一个表单数据
              formData.set('id',1) ;//可以添加发送的参数
              jQuery.support.cors=true;
              $.ajax({
               type: 'POST',
               dataType: 'json',
               url: '', 
               data: formData,//使用封装表单
               cache: false,  
               xhrFields: {
                withCredentials: true
               },
               crossDomain: true,
               contentType: false,  //这个需要关闭
               processData: false,  
               success: function (data) {
                  
               },
               error : function() {
                   console.log("异常！");
               }
           });

---

二、@RequestParam接收Ajax方式

（@RequestParam(value = "id",required = false) Integer id）

Ajax方法：

			jQuery.support.cors=true;
			$.ajax({
				type: 'POST',
				dataType: 'json',
				url: 'http://localhost:8080/getOnline',
				data: {},
				xhrFields: {
					withCredentials: true
				},
				crossDomain: true,
				contentType: 'application/x-www-form-urlencoded;charset=utf-8',
				success: function (data) {
				
				},
				error : function() {
					console.log('异常！');
				}
			});

---

三、@RequestBody接收Ajax方式

（@RequestBody People people）

People.java 自定义实体类

public class People extends BaseEntity{
    private Integer peopleId;
    private String peopleName;
......

Ajax方法：

              jQuery.support.cors=true;
              $.ajax({
               type: 'POST',
               dataType: 'json',
               url: '', 
               data: {'peopleId':1,'peopleName':'p1'},
               xhrFields: {
                withCredentials: true
               },
               crossDomain: true,
               contentType: 'application/json;charset=utf-8',  //json格式
               success: function (data) {

               },
               error : function() {
                   console.log("异常！");
               }
           });

四、新增一种写法JSON.stringify(data)

    @PostMapping("addDepartment")
    @ResponseBody
    public Object addDepartment(@RequestBody Department department){
        Tools.logger.info("进入getAllFDepartments");
        System.out.println(department.toString());
        Tools.logger.info("离开getAllFDepartments");
        return null;
    }

    //或者

    @PostMapping("addDepartment")
    @ResponseBody
    public Object addDepartment(String deptName){

        return null;
    }

            jQuery.support.cors=true;
            $.ajax({
                type: "POST",
                dataType: "json",
                url: ctx+'/findDepartmentByName',
                data:JSON.stringify(data.field),
                cache: false,
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                contentType: "application/json",
                success: function (data) {

                },
                error : function() {
                    console.log('异常！');
                }
            });

工具：

/**
 * ajax封装
 * @param ctx
 * @param url
 * @param data
 * @param successFunction
 * @param type
 */
function ykAjax(ctx,url,data,successFunction,type) {
    jQuery.support.cors=true;
    if(type==1||type=="1"){
        //单个数据提交，@RequestParam接收
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ctx+'/'+url,
            data: data,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            contentType: 'application/x-www-form-urlencoded;charset=utf-8',
            success: successFunction,
            error : function() {
                console.log('ajaxError!');
            }
        });
    }else if(type==2||type=="2"){
        //实体类接收@RequestBody
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ctx+'/'+url,
            data: data,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            contentType: 'application/json;charset=utf-8',  //json格式
            success: successFunction,
            error : function() {
                console.log('ajaxError!');
            }
        });
    }else if(type==3||type=="3"){
        //表单提交；@RequestParam接收
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ctx+'/'+url,
            data: data,
            cache: false,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            contentType: false,  //这个需要关闭
            processData: false,
            success: successFunction,
            error : function() {
                console.log('ajaxError!');
            }
        });
    }else if(type==4||type=="4"){
        //layui的表单提交@RequestBody或不写
        $.ajax({
            type: "POST",
            dataType: "json",
            url: ctx+'/'+url,
            data: data,
            cache: false,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            contentType: "application/json",
            success: successFunction,
            error : function() {
                console.log('ajaxError!');
            }
        });
    }else {
        console.log('AjaxTypeError!')
    }
}

实体类中属性list集合接收方式

@Data
public class Information implements Serializable {
    private String userName;
    private List<Experience> experiences;
}

<input name="experiences[0].name">