异步提交的几种方式以及传值类型（简易测试）

一旦看到json字符串里面【】 — js 数组 === java List
一旦看到json字符串里面{} — JS对象 === java对象或HashMap

一、ajax(JS转JSON提交)

function postjson() {
			var name = $('#name').val();
			var money = $('#money').val();
			var hobby = $('#hobby').val();
			//定义一个JS集合放值
			var v = {};		
			v.name = name;
			v.money = money;
			v.hobby = hobby;
			$.ajax({	
				//上传的数据格式必须写
				contentType: 'application/json', 
				//提交方式只能是POST,GET会乱码传不过去
				type: 'POST',
				url: 'http://127.0.0.1:8080/postjson',
				//**将JS对象转为JSON对象**
				data: JSON.stringify(v), 
				success: function(data) {
					console.log(data);
					$("#postjson").html(data.name + data.money + data.hobby);
				},
				error: function() {
					alert("提交失败");
				}
			})
		}

对应的后台（用@RequestBody接收，JSON转换成JAVA对象）：

@CrossOrigin
@RestController
public class restController {

    //异步返回postjson
    @RequestMapping("/postjson")
    public  Map<String,Object> postjson(@RequestBody Person person) {
        Map<String,Object> map = new HashMap<>();
        map.put("name",person.getName());
        map.put("money",person.getMoney());
        map.put("hobby",person.getHobby());
        System.out.println("postjson---" + person.toString());
        return map;
    }

二、axios（默认上传的数据格式是json,上传的数据可以用JS对象，这里我们用JS对象）

function postjsonaxios() {
			var name = $('#name').val();
			var money = $('#money').val();
			var hobby = $('#hobby').val();
			var v = {};
			v.name = name;
			v.money = money;
			v.hobby = hobby;
			axios({
				method: 'post',
				url: 'http://127.0.0.1:8080/postjsonaxios',
				// 传递参数，上传JS对象会帮我们自动转换
				data: v, 
			}).then(function(resp) {
				console.log(resp.data);
				$("#postjson").html(resp.data.name + resp.data.money + resp.data.hobby);
			})
		}

看起来简洁一点，我们上传JS对象也会帮我们自动转换

三、axios.post（JSON上传数据，key用了""）

function postjsonaxiospost() {
			var name = $('#name').val();
			var money = $('#money').val();
			var hobby = $('#hobby').val();
			var data = {	//json对象，key用了""
				"name": name,
				"money": money,
				"hobby": hobby
			};
			axios.post('http://127.0.0.1:8080/postjsonaxiospost', data)
			.then(function(resp) {
				console.log(resp.data);
				$("#postjson").html(resp.data.name + resp.data.money + resp.data.hobby);
			})
		}

四、不同对象间的批量上传，循环取值

function jsonlist() {
			var arr=[];
			var name = $('#name').val();
			var money = $('#money').val();
			var hobby = $('#hobby').val();
			var data = {	//json对象，key用了""
				"name": name,
				"money": money,
				"hobby": hobby
			};
			arr.push(data);
			var name1 = $('#name1').val();
			var money1 = $('#money1').val();
			var hobby1 = $('#hobby1').val();
			data = {	//json对象，key用了""
				"name": name1,
				"money": money1,
				"hobby": hobby1
			};
			arr.push(data);
			axios({
				url:"http://127.0.0.1:8080/jsonlist",
				method:"post",
				data:arr,
			}).then(function(resp) {
				console.log(resp.data);
				var arr = resp.data;
				var s = "";
				for(var i=0; i<arr.length; i++) {
					s = s + arr[i].name + arr[i].money + arr[i].hobby;
				}
				$("#postjson").html(s);
			})
		}

我们定义了一个arr数组来存储数据,每次data操作完就把它放进数组里，然后把data拿给下一个用。因为我们提交的是一个数组，所以后台接收的时候要用集合把值循环拿出来，同样，后台返回来的数据我们也要循环取出

@RequestMapping("/jsonlist")
    public  List<Map<String,Object>> jsonlist(@RequestBody List<Person> persons) {
        Map<String,Object> map;
        List<Map<String,Object>> list = new ArrayList<>();
        for (Person ps : persons) { 
        	//创建一个未知成员变量的对象
            map = new HashMap<>();
            map.put("name", ps.getName());
            map.put("money", ps.getMoney());
            map.put("hobby", ps.getHobby());
            list.add(map);
        }
        System.out.println(list);
        return list;
    }

我们用List来接收，并把它循环出来放进map里，注意：这里map每次循环都创建了一次新空间，然后添加完放进集合，返回。

五、表单文件提交（仅作备忘录用）

function uploadaxios() {
			var gender = $('#gender').val();
			var car = $('#car').val();
			var formData = new FormData();
			formData.append("file",$('#file')[0].files[0]);
			formData.append("gender",gender);
			formData.append("car",car);
			axios({
				url:"http://127.0.0.1:8080/uploadaxios",
				method:"post",
				data:formData,
				processData:false,
				contentType:false,
			}).then(function(resp) {
				console.log(resp.data);
				$("#postjson").html(resp.data);
			})
		}

今晚在做作业的过程，还遇到了IO权限不足的问题，导致文件不能放入本地C盘，经过查阅，应该是权限不足问题，放开就可以了。

jar包依赖：

<script src="js/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="js/axios.js" type="text/javascript"></script>