这两天写项目需要实现一个需求：新增产品页面点击提交按钮，经服务端处理后提示操作结果。原以为弹窗是一个很简单的东西（毕竟以前写网页或者没用spring框架写项目的时候都是很简单的），可这两天我体会到了这里面的道道还是很多的
首先，准备好表单：
<form id="addProductForm" enctype="multipart/form-data" class="am-form tpl-form-line-form" onsubmit="return false" action="#" method="post">
<div class="am-form-group">
<label for="user-name" class="am-u-sm-3 am-form-label">产品名称 <span class="tpl-form-line-small-title">Name</span></label>
<div class="am-u-sm-9">
<input type="text" class="tpl-form-input" id="product_name" name="name" placeholder="请输入产品名称">
<small>不能超过30个字符哦</small>
</div>
</div>
<div class="am-form-group">
<label for="user-name" class="am-u-sm-3 am-form-label">产品简要描述 <span class="tpl-form-line-small-title">Sketch</span></label>
<div class="am-u-sm-9">
<input type="text" class="tpl-form-input" id="user-name" name="title" placeholder="请输入产品描述">
<small>不能超过60个字符哦</small>
</div>
</div>
<div class="am-form-group">
<label for="user-phone" class="am-u-sm-3 am-form-label">产品颜色 <span class="tpl-form-line-small-title">Color</span></label>
<div class="am-u-sm-9">
<select name="color" data-am-selected="{searchBox: 1}" style="display: none;">
<option value="红色">红色</option>
<option value="蓝色">蓝色</option>
<option value="绿色">绿色</option>
<option value="红色">白色</option>
<option value="红色">黑色</option>
<option value="红色">灰色</option>
<option value="红色">黄色</option>
<option value="红色">粉色</option>
<option value="红色">紫色</option>
</select>
</div>
</div>
<div class="am-form-group">
<label for="user-name" class="am-u-sm-3 am-form-label">产品语 <span class="tpl-form-line-small-title">Analogy</span></label>
<div class="am-u-sm-9">
<input type="text" class="tpl-form-input" id="user-name" name="word" placeholder="请输入产品语">
<small>选填项，比如花的花语</small>
</div>
</div>
<div class="am-form-group">
<label for="user-weibo" class="am-u-sm-3 am-form-label">产品主图 <span class="tpl-form-line-small-title">Photo</span></label>
<div class="am-u-sm-9">
<div class="am-form-group am-form-file">
<div class="tpl-form-file-img">
<img id="main_image" width="500" height="312" src="${pageContext.request.contextPath }/res_admin/assets/img/k.jpg">
</div>
<button type="button" class="am-btn am-btn-danger am-btn-sm">
<i class="am-icon-cloud-upload"></i> 添加图片</button>
<input id="doc-form-file" type="file" name="photo_main_file" onchange="uploadFile()">
</div>
</div>
</div>
<div class="am-form-group">
<label for="user-weibo" class="am-u-sm-3 am-form-label">产品子图 <span class="tpl-form-line-small-title">Photo</span></label>
<div class="am-u-sm-9">
<div class="am-form-group am-form-file">
<div class="tpl-form-file-img">
<img id="sub_image" width="500" height="312" src="${pageContext.request.contextPath }/res_admin/assets/img/k.jpg">
</div>
<button type="button" class="am-btn am-btn-danger am-btn-sm">
<i class="am-icon-cloud-upload"></i> 添加图片</button>
<input id="doc-form-file_sub" type="file" name="photo_sub_file" onchange="uploadFile()" multiple="multiple">
</div>
</div>
</div>
<div class="am-form-group">
<label for="user-phone" class="am-u-sm-3 am-form-label">产品类型 <span class="tpl-form-line-small-title">Type</span></label>
<div class="am-u-sm-9">
<select name="type" data-am-selected="{searchBox: 1}" style="display: none;">
<c:forEach items="${productTypes}" var="productType">
<option value="${productType.getProductTypeId()}">${productType.getName()}</option>
</c:forEach>
</select>
</div>
</div>
<div class="am-form-group">
<label for="user-name" class="am-u-sm-3 am-form-label">产品价格 <span class="tpl-form-line-small-title">Price</span></label>
<div class="am-u-sm-9">
<input type="number" step="0.01" class="tpl-form-input" id="user-name" name="price" placeholder="请输入产品价格">
<small>只能填数字哦</small>
</div>
</div>
<div class="am-form-group">
<label for="user-phone" class="am-u-sm-3 am-form-label">产品性别 <span class="tpl-form-line-small-title">Sex</span></label>
<div class="am-u-sm-9">
<select name="sex" data-am-selected="{searchBox: 1}" style="display: none;">
<option value="无">无</option>
<option value="公">公</option>
<option value="母">母</option>
<option value="雌">雌</option>
<option value="雄">雄</option>
<option value="保密">保密</option>
</select>
</div>
</div>
<div class="am-form-group">
<label for="user-phone" class="am-u-sm-3 am-form-label">产品尺寸 <span class="tpl-form-line-small-title">Size</span></label>
<div class="am-u-sm-9">
<select name="size" data-am-selected="{searchBox: 1}" style="display: none;">
<option value="小">小</option>
<option value="中">中</option>
<option value="大">大</option>
<option value="特大">特大</option>
</select>
</div>
</div>
<div class="am-form-group">
<label for="user-name" class="am-u-sm-3 am-form-label">产品年龄 <span class="tpl-form-line-small-title">Invento</span></label>
<div class="am-u-sm-9">
<input type="number" class="tpl-form-input" id="user-name" name="age" placeholder="请输入产品年龄">
<small>单位：天，只能填数字哦</small>
</div>
</div>
<div class="am-form-group">
<label for="user-name" class="am-u-sm-3 am-form-label">产品库存 <span class="tpl-form-line-small-title">Stock</span></label>
<div class="am-u-sm-9">
<input type="number" class="tpl-form-input" id="user-name" name="stock" placeholder="请输入产品库存">
<small>只能填数字哦</small>
</div>
</div>
<div class="am-form-group">
<div class="am-u-sm-9 am-u-sm-push-3">
<button type="submit" onclick="addProduct()" class="am-btn am-btn-primary tpl-btn-bg-color-success ">戳这里提交</button>
</div>
</div>
</form>
呃，貌似代码有点多哈哈
这里要特别注意一点，由于要使用ajax提交表单数据，所以需要让原先表单的action失效，这样就不会按照原来的方式提交了，再加上 οnsubmit=“return false” ，这里要感谢博客园一位博主的文章https://www.cnblogs.com/han-1034683568/p/7199168.html。
然后给表单一个id，给提交按钮加上点击事件，让其调到js的函数中等待处理。OK，接下来贴上ajax：
<script type="text/javascript">
function addProduct() {
var form = new FormData(document.getElementById("addProductForm"));
$.ajax({
type: "POST",
url: "${ctx}/product/add_product_submit",
data: form,
// data: $('#addProductForm').serialize(),
processData:false,
contentType:false,
success: function (result) {
console.log(result);
if (result.result == "新增成功！") {
alert("新增成功！");
window.location.href = "${ctx}/product/req_product_list";
}
},
error: function() {
alert("新增失败！请重试");
}
});
}
</script>
这里值得一提的是FormData的使用，同样感谢另一位博主的文章https://www.cnblogs.com/zhuxiaojie/p/4783939.html
事实证明，这个工具还是蛮好用的，直接传入表单的id创建一个对象就能放到ajax里面去了，还是很方便的。这里还加了processData:false, contentType:false，具体为什么暂时不清楚
接下来是controller了：
// 新增产品
@RequestMapping(value = "/add_product_submit")
@ResponseBody
public Map<String, String> addProduct(
@RequestParam("photo_main_file") CommonsMultipartFile photo_main_file,
@RequestParam("photo_sub_file") CommonsMultipartFile[] photo_sub_file,
HttpServletRequest request, HttpServletResponse response,
@RequestParam("name") String name, @RequestParam("title") String title,
@RequestParam("color") String color, @RequestParam("word") String word,
@RequestParam("type") String type, @RequestParam("price") String price,
@RequestParam("sex") String sex, @RequestParam("size") String size,
@RequestParam("age") int age, @RequestParam("stock") int stock) throws IOException {
Map<String, String> map = new HashMap<String, String>();
// ……中间的数据库操作和其他代码省略
if (isSuccess) {
System.out.println("产品已经完整地插入数据库中！");
map.put("result", "新增成功！");
}
else {
System.out.println("产品没有完整地插入数据库中！");
map.put("result", "新增失败！");
}
return map;
}
需要注意的是，这里需要在@RequestMapping后面加上@ResponseBody注解，目的是将map打包发送给ajax。然后就出现了弹窗了
忍不住再感慨下，这个弹窗出来真不容易……
大致的流程就是这样了，在这期间我走了很多弯路，特意记录下，也希望能帮助到其他博友。
2231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
