一旦看到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>