ajax&form提交参数前后台格式

前言

大家好，这里是编程时长两月半的个人练习生xxx，本文主要讲述springMVC参数传递与接收格式

一：ajax和form区别

1：基本区别
ajax异步请求，方便快捷，代码控制，依赖浏览器js
form放弃本页面，新建页面，不需代码控制，浏览器基本功能
详情参考博文https://www.cnblogs.com/lvxingyu/p/9261012.html

2：博主有话说
推荐能用ajax的地方就用ajax，因为很多时候我们并不需要刷新页面，ajax在请求结束后，能够返回数据，更加方便前端编程，http协议有8种请求类型，常用POST和GET，两者区别参考https://www.cnblogs.com/logsharing/p/8448446.html
基本满足各种开发需求（本地开发，使用第三方接口等），如下：
OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送’*'的请求来测试服务器的功能性。
HEAD：向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应消息头中的元信息。
GET：向特定的资源发出请求。
POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。
PUT：向指定资源位置上传其最新内容。
DELETE：请求服务器删除Request-URI所标识的资源。
TRACE：回显服务器收到的请求，主要用于测试或诊断。
CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

二：前端请求格式&后台接收格式

1：ajax
（1）：get：url+kv格式（get传参数就是把kv直接放在url后面，url与kv用"?“隔开，kv与kv用”&"隔开）
栗子：
js：

$.ajax({
			type:'GET',
			url: '<%=basePath%>inexamination/classlist?CLASS_ID='+$("#CURRICULUM_GRADE").val(),			
			success: function(data){
			}
		});

java：

public String classlist(String CLASS_ID)throws Exception{
//形参名字与前端保持一致
return "";
}
或者
public String classlist(@RequestParam("CLASS_ID") String CLASS_ID)throws Exception{
//注解内参数与前端保持一致
return "";
}

注解@RequestParam用法详情参考https://www.cnblogs.com/zhlblogs/p/9553491.html

（2）：post：json格式请求体（常见的post请求，参数以键值对形式放在data{}里）
栗子：
js：

 $.ajax({
        url: prefix + "/list",
        data: {
            "url" : "http://"+url+"/api/json",
            "msg_id": "1034",
            "lib_name": lib_name,
            "lib_type": lib_type
        },
        success: function (res) {

java

 @ResponseBody
    @GetMapping("/list")
    public String list(@RequestParam Map<String, Object> params) {
        String url = params.get("url").toString();
        String res = HttpClientUtil.doPostOfJson(url, getJson(params));
        return res;
    }

标准json键值对格式，后台可用Map接收

（3）：post：json格式字符串（当前端参数个数为动态变化的，可以把参数放在一个数组里，用JSON.stringify()传递，注意格式必须是json格式）
栗子：
js:

for(var j=0;j<i;j++){
				var v1=$('.BASICINFORMATIONOFSTUDENTS_ID').eq(j).val();
				var v2=$('.DISCIPLINE').eq(j).val();
				var v3=$('.SCORE').eq(j).val();
				var v4=$('.COMMENT').eq(j).val();
				s.push({"INEXAMINATION_ID":"${pd.INEXAMINATION_ID}","BASICINFORMATIONOFSTUDENTS_ID":v1,"DISCIPLINE":v2,"SCORE":v3,"COMMENT":v4});
			}

			$.ajax({
				type:'POST',
				url: '<%=basePath%>inexamination/inputscore',
				contentType:'application/json',
		    	data: JSON.stringify(s),
				dataType:'json',
				cache: false,
				async:false,
				success: function(data){				
					top.Dialog.close();
				}
			});

java:

@RequestMapping(value="/inputscore")
	@ResponseBody
	public Object inputscore(@RequestBody String s) throws Exception{
		Map<Object,Object> map=new HashMap<>();
		PageData pd = new PageData();
		JSONArray json=JSONArray.fromObject(s);//将json格式字符串转json数组
		List<PageData> list=new ArrayList<>();
		int i=0;
		for(i=0;i<json.size();i++){//遍历操作
			pd.put("INEXAMINATION_ID", json.getJSONObject(i).getString("INEXAMINATION_ID"));
			pd.put("BASICINFORMATIONOFSTUDENTS_ID", json.getJSONObject(i).getString("BASICINFORMATIONOFSTUDENTS_ID"));
			pd.put("DISCIPLINE", json.getJSONObject(i).getString("DISCIPLINE"));
			pd.put("SCORE", json.getJSONObject(i).getString("SCORE"));
			pd.put("COMMENT", json.getJSONObject(i).getString("COMMENT"));
			pd.put("UPDATE_DATE", Tools.date2Str(new Date()));	//更新日期
			list.add(pd);
			inexaminationService.editScore(pd);
			pd.clear();
		}
		
		if(i==json.size()){
			map.put("result", "sucess");
		}
		return map;
	}

形参前面必须加注解@RequestBody
注解@RequestBody详情参考https://blog.csdn.net/justry_deng/article/details/80972817

（4）：post：单文件（formData）
栗子：
js:

formData.append('file', this.files[i]);
$.ajax({
	type: 'post',
    url: '<%=basePath%>studenttask/upload',
    data: formData,
    mimeType: "multipart/form-data",
	contentType: false,
	processData: false
	success: function(data){				
				
	}
});

java:

@RequestMapping(value="/upload")
	@ResponseBody
	public PageData upload(MultipartFile file){
		PageData pd = new PageData();//自定义的类，不需要关注
		return pd;
	}

MultipartFile 可接受单文件

（5）：post：单文件+参数（formData）
栗子：
js:

 var formData = new FormData();                 // 生成FormData对象
        var upload_file = $(".uploadLocal-input")[0].files[0];
        formData.append("img", upload_file);
        formData.append("url", "http://"+url+"/api/form");
        formData.append("msg_id", "1029");
        formData.append("person_name", person_name);
        formData.append("person_age", person_age);
        formData.append("person_gender", person_gender);
        formData.append("person_idcard", person_idcard);
        formData.append("person_addr", person_addr);
        formData.append("lib_id", lib_id);
        $.ajax({
            url: prefix + "/form",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            cache: false,
            success: function (res) {
                window.location.reload();
            }
        });

java:

 @ResponseBody
    @RequestMapping(value="/form", method=RequestMethod.POST)
    public String form(HttpServletRequest request, HttpServletRequest response, HttpSession session)  throws IOException{
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        MultipartFile file = multipartRequest.getFile("img");//file是form-data中二进制字段对应的name
        Map<String, String[]> params=request.getParameterMap();
        String url=params.get("url")[0];//其他参数
}

2：form
表单提交我用的不多，普通情况，用HttpServletRequest即可接收，详情参考https://blog.csdn.net/wwq0813/article/details/90256058
前端表单enctype属性很重要，常见三种：
（1）multipart/form-data不对字符编码，用于发送二进制的文件，其他两种类型不能用于发送文件；

（2）text/plain用于发送纯文本内容，空格转换为 “+” 加号，不对特殊字符进行编码，一般用于email之类的；

（3） application/x-www-form-urlencoded，在发送前会编码所有字符，即在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，"+"加号转换为空格，特殊符号转换为 ASCII HEX 值）。

其中application/x-www-form-urlencoded为默认类型。

form提交文件参考https://jingyan.baidu.com/article/c33e3f48e92c07ea15cbb5df.html