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

本文展示了一个模仿知名电商平台的商品评价系统实现,采用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);
		}
	}
内容概要:本文针对国内加密货币市场预测研究较少的现状,采用BP神经网络构建了CCi30指数预测模型。研究选取2018年3月1日至2019年3月26日共391天的数据作为样本,通过“试凑法”确定最优隐结点数目,建立三层BP神经网络模型对CCi30指数收盘价进行预测。论文详细介绍了数据预处理、模型构建、训练及评估过程,包括数据归一化、特征工程、模型架构设计(如输入层、隐藏层、输出层)、模型编译与训练、模型评估(如RMSE、MAE计算)以及结果可视化。研究表明,该模型在短期内能较准确地预测指数变化趋势。此外,文章还讨论了隐层节点数的优化方法及其对预测性能的影响,并提出了若干改进建议,如引入更多技术指标、优化模型架构、尝试其他时序模型等。 适合人群:对加密货币市场预测感兴趣的研究人员、投资者及具备一定编程基础的数据分析师。 使用场景及目标:①为加密货币市场投资者提供一种新的预测工具和方法;②帮助研究人员理解BP神经网络在时间序列预测中的应用;③为后续研究提供改进方向,如数据增强、模型优化、特征工程等。 其他说明:尽管该模型在短期内表现出良好的预测性能,但仍存在一定局限性,如样本量较小、未考虑外部因素影响等。因此,在实际应用中需谨慎对待模型预测结果,并结合其他分析工具共同决策。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值