ajax
这里我整理了线ajax的data的各种传值的设置，包括json对象，json字符串，还有fromdata。
第一种——json对象：{‘shopName’:’店铺名称’,’shopAddr’:’店铺详细地址’}
前台ajax的写法
$.ajax({
url : '/o2o/shopadmin/insertShop',
type : 'POST',
data :{'shopName':'shopName','shopAddr':'shopAddr'}, //这里的data就是json对象
dataType: "json",
success : function(data) {
$.toast('进来了！');
}
});
*当页面传的是json对象时，只要设置dataType: “json”就可以了，或者什么都不设置都行
//注意：这里不能加下面这行，否则数据会传不到后台
//contentType:’application/json;charset=UTF-8’*,
后台代码，这里我们打印接收的两个参数
@RequestMapping(value="insertShop", method = RequestMethod.POST)
@ResponseBody
public void insertShop(HttpServletRequest request){
System.out.println(request.getParameter(shopName));
System.out.println(request.getParameter(shopAddr));
}
//或者
@RequestMapping(value="insertShop", method = RequestMethod.POST)
@ResponseBody
public void insertShop(HttpServletRequest request，String shopName,String shopAddr){
System.out.println(shopName);
System.out.println(shopAddr);
}
第二种——json字符串：’{‘shopName’:’店铺名称’,’shopAddr’:’店铺详细地址’}’
json对象：也可以通过JSON.stringify({‘shopName’:’店铺’,’shopAddr’:’shopAddr’})的方法将json对象转化为json字符串
前台ajax的写法
使用json时contentType:’application/json;charset=UTF-8’是关键，
设置charset=UTF-8这样传过去的中文才可以正常的显示
//使用json时contentType:'application/json;charset=UTF-8'是关键，
//设置charset=UTF-8这样传过去的中文才可以正常的显示
$.ajax({
url : '/o2o/shopadmin/insertShop',
type : 'POST',
traditional:true,//这使json格式的字符不会被转码
data :JSON.stringify({'shopName':'店铺','shopAddr':'shopAddr'}),
contentType:'application/json;charset=UTF-8', //这里的这行是关键
dataType: "json",
success : function(data) {
$.toast('进来了！');
}
});
后台代码，这里同样打印接收到的json字符串
传JSON字符串+@RequestBody接收 切记只有加了这个才能正常的接受json字符串
//传JSON字符串+@RequestBody接收 切记只有加了这个才能正常的接受json字符串
@RequestMapping(value="insertShop", method = RequestMethod.POST)
@ResponseBody
public void insertShop( @RequestBody String shopName,
HttpServletRequest request){
System.out.println(shopName);
}
第三种——formdata传值
我们使用ajax时可能即有数据又有文件流，这个时候我们就可以使用fromdata来传值
通过form表单的形式提交
前端页面代码——这里from需要设置enctype=”multipart/form-data”
<form class="inpform" id="uploadForm" enctype="multipart/form-data">
<div class="f-inp">
<div><i>店铺名称：</i>
<input type="text" name="shopName" id="shopName" >
</div>
<div><i>店铺地址：</i>
<input type="text" name="shopAddr" id="shopAddr" >
</div>
<h4>图片</h4>
<input type="file" id="shopImg" name="shopImg" />
</div>
<input type="button" value="提交" id="submit">
</form>
ajax写法
processData : false, //必须false才会避开jQuery对 formdata 的默认处理
contentType : false, //必须false才会自动加上正确的Content-Type
$('#submit').click(function(){
//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
async: false,//要求同步 不是不需看你的需求
url : '/o2o/shopadmin/insertShop',
type : 'POST',
data : formData,
processData : false, //必须false才会避开jQuery对 formdata 的默认处理
contentType : false, //必须false才会自动加上正确的Content-Type
success : function(result) {
$.toast('进来了！');
}
});
});
后台代码
@RequestMapping(value="insertShop", method = RequestMethod.POST)
@ResponseBody
public void insertShop(@RequestParam(value = "shopImg", required = false)MultipartFile shopImg,
String shopName,String shopAddr,HttpServletRequest request){
System.out.println(shopImg.getOriginalFilename());
System.out.println(shopName);
System.out.println(shopAddr);
}
或者通过jQuery的方式，不适用form表单，这样要什么传什么
$('#submit').click(function(){
var shop={};
shop.shopName=$('#shopName').val();
shop.shopAddr=$('#shopAddr').val();
var formData=new FormData();
formData.append('shopImg', shopImg);
formData.append('shopStr', JSON.stringify(shop));
$.ajax({
async: false,//要求同步 不是不需看你的需求
url : '/o2o/shopadmin/insertShop',
type : 'POST',
data : formData,
processData : false, //必须false才会避开jQuery对 formdata 的默认处理
contentType : false, //必须false才会自动加上正确的Content-Type
success : function(result) {
$.toast('进来了！');
}
});
});
后台代码
@RequestMapping(value="insertShop", method = RequestMethod.POST)
@ResponseBody
public void insertShop(@RequestParam(value = "shopImg", required = false)MultipartFile
shopImg,String shopStr,HttpServletRequest request){
System.out.println(shopImg.getOriginalFilename());
System.out.println(shopStr);
}
---------------------
作者：fan.f
来源：CSDN
原文：https://blog.csdn.net/qq_34888129/article/details/82696171
版权声明：本文为博主原创文章，转载请附上博文链接！
