• 欢迎访问本网站,技术教程,资源分享,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入东蓬莱!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏东部蓬莱吧

使用Ajax传输form表单对象或者数组

前端开发 Jokul 1年前 (2020-07-27) 331次浏览 0个评论 扫描二维码

传输一个对象,用于修改对象字段

话不多说,上js代码:

 //将序列化数据转为对象
var formData =  $("form").serializeArray();
var formObject = {};
for (var item in formData) {
     formObject[formData[item].name] = formData[item].value;
}
	
$.ajax({
   url: path + 'msg/save',
   method: 'get',
   data: formObject,              
   dataType: 'JSON',
   success: function(res) {
       //接口的返回值
       console.log(res);
   }
})

后台接口可继续用对象接收

public String save(Msg msg){
   service.save(msg);
   return "保存成功";
}

传输一个带文件的对象(此方法万金油,后端只需用对象啥都能接收)

//data为表单序列化,设置contentType: false, processData: false,文件如果为多个,name确保一致
$.ajax({
     url: path + 'msg/update',
     contentType: false,
     processData: false,
     data:new FormData($("#f1")[0]),
     type: 'post', //HTTP请求类型
     success:function(result){
     }
})

后台用对象接收,接收文件的属性需要是MultipartFile,如果是多个文件可用 List< MultipartFile >

public String update(TRealNameInfo bean) {}

传输数组,通常传输id数组用于批量删除

  • 不加任何东西
  • $.ajax({
         type: 'get',
         url: path+ "msg/delList",
         data: {
                'bookIdList': bookIdList,
                token: getCookie("token")
         },
         success: function (result) {
         }
    })
    

    后台用@RequestParam(value = “bookIdList[]”),(名字要对上,数组的话 ” [ ] “一定要带上 )

    public String delbookList(@RequestParam(value = "bookIdList[]") Long[] bookIdList){
    }
    
  • 需带上 traditional:true
  • $.ajax({
            type : "POST",
    	url : path + "/msg/projectTypeListDelete",
    	data :{ 
    	      "projectNames" :  projectNameList
    	},	
            traditional:true ,
            success : function(data,status) {
            }
    })
    

    后台直接用数组 String[] projectNames 接收

    public GMap delBatch(String[] projectNames , HttpServletRequest request) {
    }
    

    东部蓬莱 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
    转载请注明原文链接:使用Ajax传输form表单对象或者数组
    喜欢 (0)
    [支付宝]
    分享 (0)
    发表我的评论
    取消评论
    表情 贴图 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址