【笔记】知识点：多表单提交

最新推荐文章于 2025-05-08 09:19:19 发布

原创最新推荐文章于 2025-05-08 09:19:19 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#多表单提交

本文展示了一个模仿知名电商平台的商品评价系统实现，采用HTML、CSS和JavaScript构建界面，利用jQuery和layui框架进行交互和样式设计。系统允许用户对订单中的每个商品进行评分和评论，通过AJAX将数据异步发送至后端保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仿某宝订单商品评价
在这里插入图片描述

<link rel="stylesheet" href="<%=basePath%>static/plugins/layui-v2.3.0/css/layui.css" />
<script src="<%=basePath%>static/assets/js/jquery-1.11.3.min.js"></script>
<script src="<%=basePath%>static/plugins/jquery/jquery.serializejson.min.js"></script>
<script src="<%=basePath%>static/plugins/layui-v2.3.0/layui.js"></script>
<script type="text/javascript">
$(function(){
	
	layui.use(['rate'], function(){
		  rate = layui.rate;
		  layui.each($('.rate'), function (index,elem){
			  rate.render({
				    elem: elem,
				    value:5,
				    choose: function(value){
				    	$(".sel_"+index).val(value);
				   	  }
				  });
		  });
	});
	
})
function changeRate(obj, thisIndex){
	var rateNum = $(obj).val();
	layui.each($('.rate'), function (index,elem){
		if(thisIndex == index){
			rate.render({
			    elem: elem,
			    value: rateNum,
			    choose: function(value){
			    	$(".sel_"+index).val(value);
			   	  }
			});
		}
		  
	  });
}

function submitForm(size){
	
	var paramArray=new Array();
	for(var i=0;i<size;i++){
		var frmjson = $("#frm_"+i).serializeJSON();
		paramArray.push(frmjson);
	}
	console.log(JSON.stringify(paramArray));
	$.ajax({
	    type: 'post',
	    url: "mall/saveComment.do",
	    data: JSON.stringify(paramArray),
	    contentType: 'application/json', //极其重要
	    dataType:'json',
	    success: function(data) {
	    	if(data.status==200){
	    		alert("评价成功！");
	    		window.open("personal/center.do?url=mall/orders/list.do&urlId=13");
	    	}else{
	    		alert(data.msg);
	    	}
	    },
	    error: function(){
	    	alert("网络异常！");
	    }
	})
	
}
/**
 * form 表单序列化成json (没有用到，备用吧)
 */
function transformToJson(obj) {
    var o = {};
    var a = $(obj).serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};
</script>

页面：

<body id="bod">
	<div id="wrap">
      	<input id="contentId" type="hidden" value="product_list_13" >
       	<div class="apply">
			<div class="heder">
				<h3>商品评价</h3>
			</div>
			<div class='orderInfo'>
				<div class="dd">
		            <a href="javascript:void(0);">订单编号：</a>
		            <a href="javascript:void(0);">${mallOrder.ordersId }</a>
		        
		            <a href="javascript:void(0);" style="margin-left: 30px;">商品数量：</a>
		            <a href="javascript:void(0);">${mallOrder.num }</a>
		        </div>
			</div>
				<form id="frm_0" class="frm_box">
					<c:forEach items="${mallOrder.list }" begin="0" end="0" var="orderItem">
						<div class="body">
							<div class="right">
						        <div class="jieshao">
						            <div class="img">
						                <a href="javascript:void(0);">
						                    <img src="${orderItem.cover }" width="120px" height="145px;" alt="${orderItem.goodsName }">
						                </a>
						            </div>
						            <div class="sl">
						                <a href="javascript:void(0);" style="color: #333333">${orderItem.goodsName }</a>
						                <a href="javascript:void(0);" style="color: #999999;margin-top: 45px;">数量：${orderItem.goodsNum }</a>
						            	<a href="javascript:void(0);" style="color: #999999">单价：¥${orderItem.goodsPrice }</a> 
						            	<a href="javascript:void(0);" style="color: #999999">小计：¥${orderItem.subtotal }</a> 
						            </div>
						        </div>
						    </div>
						    <input type="hidden" name="goodsId" value="${orderItem.goodsId }"/>
						    <input type="hidden" name="orderId" value="${mallOrder.id }"/>
					        <div class="left">
						        <div class="left_1">
						            <a class="tk" href="javascript:void(0);" style="margin-right: 3px;">商品与描述相符（打分）：</a>
									<div class="rate"></div>
				                  	<select class="sel_0" tabindex="0" name="score" title="上下键，选评星等级。" onchange="changeRate(this,0)">
				                  		<option value="5">5星</option>
				                  		<option value="4">4星</option>
				                  		<option value="3">3星</option>
				                  		<option value="2">2星</option>
				                  		<option value="1">1星</option>
				                  	</select>
								</div>
						        <div class="tk_je" style="margin-top: 10px;">
						            <textarea name="content" cols="60" rows="5" maxlength="400" style="border: 1px #ccc solid;padding: 5px;">${replacement.replaceExplain }</textarea>
						        </div>
						    </div>
						</div>
					</c:forEach>
				</form>
				
				
				<c:if test="${fn:length(mallOrder.list) gt 1 }">
					<fieldset class="layui-elem-field">
						<legend><a href="javascript:void(0);">同一订单里的商品，也评论一下呗!</a></legend>
						<div class="layui-field-box">
							<c:forEach items="${mallOrder.list }" begin="1" var="orderItem" varStatus="vs">
							<form id="frm_${vs.count }" class="frm_box">
							<div class="body">
								<div class="right" style="width: 360px;">
							        <div class="jieshao">
							            <div class="img">
							                <a href="javascript:void(0);">
							                    <img src="${orderItem.cover }" width="120px" height="145px;" alt="${orderItem.goodsName }">
							                </a>
							            </div>
							            <div class="sl">
							                <a href="javascript:void(0);" style="color: #333333">${orderItem.goodsName }</a>
							                <a href="javascript:void(0);" style="color: #999999;margin-top: 45px;">数量：${orderItem.goodsNum }</a>
							            	<a href="javascript:void(0);" style="color: #999999">单价：¥${orderItem.goodsPrice }</a> 
							            	<a href="javascript:void(0);" style="color: #999999">小计：¥${orderItem.subtotal }</a> 
							            </div>
							        </div>
							    </div>
							    <input type="hidden" name="goodsId" value="${orderItem.goodsId }"/>
							    <input type="hidden" name="orderId" value="${mallOrder.id }"/>
						        <div class="left">
							        <div class="left_1">
							            <a class="tk" href="javascript:void(0);" style="margin-right: 3px;">商品与描述相符（打分）：</a>
										<div class="rate"></div>
					                  	<select class="sel_${vs.count }" tabindex="0" name="score" title="上下键，选评星等级。" onchange="changeRate(this,${vs.count })">
					                  		<option value="5">5星</option>
					                  		<option value="4">4星</option>
					                  		<option value="3">3星</option>
					                  		<option value="2">2星</option>
					                  		<option value="1">1星</option>
					                  	</select>
									</div>
							        <div class="tk_je" style="margin-top: 10px;">
							            <textarea name="content" cols="60" rows="5" maxlength="400" style="border: 1px #ccc solid;padding: 5px;">${replacement.replaceExplain }</textarea>
							        </div>
							    </div>
							</div>
							</form>
							</c:forEach>
					   </div>
					</fieldset>
				</c:if>
				
				<div class="btn_submit">
		            <a href="javascript:submitForm('${fn:length(mallOrder.list)}');">提交</a>
		        </div>
		</div>
    </div>
</body>
</html>

contrller：

	/**
	 * 商品评论
	 * 
	 * @Author : liuzy
	 * @Date : 2019年8月7日 下午6:06:49
	 */
	@RequestMapping("/saveComment.do")
	@ResponseBody
	public SysResult saveComment(HttpServletRequest request, @RequestBody String param) throws Exception{
		try {
			UserInfo userInfo = TokenUtil.getCookie(request);
			List<MallComment> list = JSON.parseArray(param, MallComment.class);
			String result = null;
			for(MallComment tmp : list){
				tmp.setMemberId(userInfo.getMemberId());
				if(StringUtils.isEmpty(tmp.getContent())){
					tmp.setContent("此用户没有填写评论！");
				}else{
					result = BaiduContentCensor.isConcatSensitiveWord(tmp.getContent());
					if("1".equals(result)) {
						return SysResult.fail("评论内容包含敏感词，请修改后提交..");
					}
				}
				tmp.setStatus(1);
			}
			commentSrv.saveMallComment(list);
			return SysResult.success(MsgConstant.SUCCESS);
		} catch (Exception e) {
			e.printStackTrace();
			return SysResult.fail(MsgConstant.FAIL);
		}
	}