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

最新推荐文章于 2022-03-14 07:44:33 发布
最新推荐文章于 2022-03-14 07:44:33 发布
阅读量306 收藏
点赞数
文章标签： 多表单提交
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jul_11th/article/details/99409498
版权

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

<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);
		}
	}
朱赤墨黑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
数据开发基础知识点-1(提交方式)
09-11
数据开发基础知识点，网上找到的，分享给大家
页面提交一个小知识点分享
stormeryang的专栏
12-02 155
能够进行post提交两种方式：表单和ajax。
多表单提交
weixin_30656145的博客
09-01 88
控制器代码： using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Mvc1.Models; namespace Mvc1.Controllers { public class HomeCont...
知识点整理笔记
weixin_30388677的博客
03-05 164
0-写在前面 从上学期的数据库课设要求搭建网页开始接触到前端技术，到假期冯如杯做展示平台的开发，学习了一定的前端技术基础，再此记录一下学习的心得与收获。 1-基础知识补充 1-1 HTML5 【概述】 　　W3C对于超文本标记语言HTML(HyperText Markup Language) 的第五次重大修改。是继HTML4.01以后的一个新的标准。自2008年第一份正式草案提出，...
小程序学习笔记-其它知识点：表单验证
李小砍的技术博客
03-07 184
【代码】小程序学习笔记-其它知识点：表单验证。
深度学习知识点全面总结
热门推荐
专注大数据与人工智能技术分享，欢迎私信加群互相学习！
01-05 23万+
本文详细介绍深度学习概念及原理，参考网上相关资料汇总，内容包含众多章节，包括神经网络基础及常见深度学习网络结构介绍，用于个人学习总结，适合深度学习初学者学习。同时介绍机器学习常见的分类算法：SVM、神经网络、随机森林、逻辑回归、KNN、贝叶斯。常见的监督学习算法：感知机、SVM、人工神经网络、决策树、逻辑回归.........
JavaScript笔记：表单脚本
YuqiRealm.com
09-20 2970
JavaScript笔记：表单脚本 1、表单的基础知识 2、文本框脚本 3、选择框脚本 4、表单序列化 5、富文本编辑
Django知识点笔记
suic009的博客
01-15 4441
前言：本人十分懒，动手练习，4天二倍速看教学视频学完了Django，发现配套的教学笔记很多干货都没有记载下来，又担心自己遗忘，于是犹豫很久还是自己敲一篇笔记加深理解巩固记忆吧。 内容可能有一点点乱，因为我把前后涉及的知识点全罗列出来了，因此不适合初学的小白观看，但用来复习还是不错的。 如何快速（简单几个步骤）又全面地（每个步骤涉及的小知识点基本都用上）写一个小项目？ settings里面有什么？（auth） 一、 Django开篇 **MVT与MVC Django 采用
HTML常用知识点总结笔记
果冻
07-01 6421
目录 前言 一、HTML简介 1.什么是HTML? 2.HTML 标签 (1)HTML标签 (2)head标签 (3)body标签 3.HTML 元素 二、基础知识 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、图片标签 (五)、相对路径和绝对路径 (六)、超链接标签（重点） (七)、列表标签 HTML3种列表 (1)、有序列表 (2)、无序列表 (3)、自定义列表 (八)、表格标签 (...
JavaScript笔记知识点整理图文.pdf
11-29
JavaScript笔记知识点整理图文 JavaScript是一种广泛应用于web开发的脚本语言，由于其灵活性、跨平台性和动态性，JavaScript广泛应用于Web前端开发、移动应用开发、桌面应用开发等领域。下面是 JavaScript 笔记知识...
bootstrap基础知识学习笔记
09-01
通过深入学习和实践以上知识点，你可以熟练掌握 Bootstrap 的基础用法，从而高效地构建美观且响应式的网站或应用。在实际项目中，结合其他前端技术（如 Angular, React, Vue 等）和后端框架，Bootstrap 可以发挥更大...
Bootstrap简单表单显示学习笔记
09-01
本文将深入探讨Bootstrap中关于简单表单显示的相关知识点，包括基本表单结构、内联表单以及样式调整。 首先，我们来看基本的表单结构。Bootstrap中的表单设计注重易用性和美观性。创建一个基本的Bootstrap表单，你...
【学习笔记】：DOM对象及事件绑定
01-08
【学习笔记】：DOM对象及事件绑定 ...以上就是关于DOM对象和事件绑定的一些基本知识点，理解并掌握它们对于开发交互性强的Web应用至关重要。通过熟练运用DOM操作和事件处理，可以创建出各种动态效果和用户交互功能。
JS用户反馈表单提交代码.zip
10-08
【标题】"JS用户反馈表单提交代码.zip" 涉及的知识点主要集中在JavaScript、jQuery和CSS特效上，这些都是构建交互式网页的关键技术。在实际应用中，开发者经常使用这些技术来创建用户友好的反馈表单，提高用户体验。...
Android学习笔记：Android基础知识点（不断更新中）
浩比的专栏
10-28 2万+
1、Android系统的四大组件分别是：活动（Activity）、服务（Service）、广播接收器（Broadcast Receiver）、内容提供器（Content Provider）。 2、定义一个应用程序名的字符串，有以下两种方式来引用它：
PHP知识点笔记
weixin_51227348的博客
03-14 904
目录（以下笔记针对个人初学或不熟悉的内容）PHP代码标记PHP注释PHP语句分隔符变量的使用预定义变量可变变量常量定义的两种方式常量的命名规则数据类型类型转换类型判断整数类型进制转换：手动转换浮点类型布尔类型连接运算符错误抑制符计算机码位运算符 PHP代码标记 ASP标记：<%php代码%> 短标记：<?php代码?> 以上两种基本弃用，如果要使用需要在配置文件中开启 脚本标记： 标准标记（常用）：<?php代码?> PHP注释 PHP中注释分为两种：行注释和
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
07-17
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
torchaudio-0.13.1+cpu-cp39-cp39-win_amd64.whl
最新发布
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
iOS笔记精粹：高级定制与实用技巧详解
本资源是一份个人精心整理的超精密iOS笔记，涵盖了iOS开发中的多个核心知识点，旨在帮助开发者提升在苹果设备上的应用开发效率和理解。以下是部分内容的详细解析： 1. **键盘管理**: 提供了如何在应用中实现键盘的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值