form表单提交数据格式(提交表单的4种方式)

来源:国外服务器 在您之前已被浏览:1 次
导读:目前正在解读《form表单提交数据格式(提交表单的4种方式)》的相关信息,《form表单提交数据格式(提交表单的4种方式)》是由用户自行发布的知识型内容!下面请观看由(国外主机 - www.2bp.net)用户发布《form表单提交数据格式(提交表单的4种方式)》的详细说明。
笨笨网美国主机,w ww.2 b p .n e t

1.说明

项目中使用form表单配合ajax同时提交文件和其他的参数,具体实现请看代码

2.前端代码

  • form表单部分
  • 前台提交的是方式是form表单方式,提交内容包括普通的参数和文件

    <form action="" class="form-horizontal " id="equipmentTypeform" enctype=”multipart/form-data”/> <input type="text" class="form-control" id="manufacturer" name="manufacturer"> <input type="text" class="form-control" maxlength="20" id="equipmentTypeNm" name="equipmentTypeNm" placeholder="请输入设备类别名称"> <a href="javascript:fileChange();" data-item="import" class="btn btn-primary btn-xs m-5"><i class="fa fa-eye"></i>导入</a><span id="importName"></span><input type="file" id="fielUpload" name="file" style="display: none" onchange="importDfFile()" /> </from>

    2.ajax

    var formData = new FormData(); //需要用到formData formData.append('file',$("#fielUpload")[0].files[0]); //添加选择的文件 key值为file //把from表单的参数序列化 转换成json key值为 equipmentTypeFormformData.append('equipmentTypeForm',JSON.stringify($('#equipmentTypeform').serializeObject())) $.ajax({ type : "post", url : "aaa.ajax",//自己的接口地址 data :formData, dataType : "json", cache: false, async:false, processData: false, contentType: false,//必须添加 success : function(data) { if(data.success){ //成功之后执行的代码 }else{ //失败之后的代码 } } });

    3.后端代码

    @ResponseBody@RequestMapping(value = "/aaa.ajax",method = RequestMethod.POST)public String save(@RequestParam(value="file") MultipartFile file,HttpServletRequest reuqest) {//拿到json 转换成我们需要的对象 EquipmentTypeForm equipmentTypeForm = JSONObject.parseObject(reuqest.getParameter("equipmentTypeForm"), EquipmentTypeForm.class); System.out.println(); System.out.println(file); }
    笨笨网美国主机,w ww.2 b p .n e t
    提醒:《form表单提交数据格式(提交表单的4种方式)》最后刷新时间 2025-03-21 11:17:42,本站为公益型个人网站,仅供个人学习和记录信息,不进行任何商业性质的盈利。如果内容、图片资源失效或内容涉及侵权,请反馈至,我们会及时处理。本站只保证内容的可读性,无法保证真实性,《form表单提交数据格式(提交表单的4种方式)》该内容的真实性请自行鉴别。