js实现配置菜品规格时，向后台传一个json格式字符串
由于本公司做的是订餐平台，那么在上传菜品时，需要配置菜品规格，比如份量（大中小），味道(猛辣，中辣，微辣) 由于这些数据，在表的设计时 没有保存到菜品表，那么在点击保存菜品数据时，配置规格这块数据，我就封装好一个json 格式字符串传给后台再把json转换成对象，这样后台就好处理多了。
一，》》》》》》jsp页面
<!-- 单一规格 -->
<div style="border: 1px solid #e0e0e0;border-radius: 10px; margin-bottom: 10px;width: 100%" id="singleDiv">
<div class="control-group form-group">
<label for="优惠价格" class="col-md-2 control-label">优惠价格</label>
<div class="col-md-9">
<input type="text" name="price" value="${price}" class="form-control" style="width: 20%"/>
</div>
</div>
<div class="control-group form-group">
<label for="原价格" class="col-md-2 control-label">原价格</label>
<div class="col-md-9">
<input type="text" name="oldPrice" value="${oldPrice}" class="form-control" style="width: 20%"/>
</div>
</div>
</div> <!-- 多种规格 -->
<div style="border: 1px solid #e0e0e0;border-radius: 10px; margin-bottom: 10px;width: 100%;" id="variedDiv" >
<div class="control-group form-group">
<label for="名称" class="col-md-2 control-label">名称</label>
<div class="col-md-9">
<input type="text" id="standardName" name="standardName" value="${standardName }" class="form-control" style="width: 20%"/>
</div>
</div>
<div class="standard_parent">
<c:forEach items="${dishesStandardList }" var="dishesStandard">
<div class="standard_class">
<div class="col-md-5 dishesParamClassList">
<label>规格：</label>
<input type="hidden" id="standardId" name="standardId" value="${dishesStandard.id }" >
<input type="text" id="formName" name="formName" value="${dishesStandard.name }" class="form-control inputClassList"/>
</div>
<div class="col-md-6 dishesParamClassList">
<label>价格：</label>
<input type="text" id="standardPrice" name="standardPrice" value="${dishesStandard.price }" class="form-control inputClassList" />元
</div>
<div class="dell_standard" style="margin-left: -10px; margin-top: -3px;" id="dellMonthCard">
<span class="title_name dell_dishesStandard" standardId="${dishesStandard.id }">删除</span>
<span class="konck_icon konck_i"></span>
</div>
</div>
</c:forEach>
</div>
<div class="standard_add">
<span class="title_name add_coupon">添加规格</span>
<span class="konck_icon konck_h"></span>
</div>
</div> <!-- 附加菜品属性 -->
<div class="control-group form-group">
<label for="附加菜品属性" class="col-md-2 control-label">附加菜品属性</label>
</div>
<div style="border: 1px solid #e0e0e0;border-radius: 10px; margin-bottom: 10px;width: 100%;" id="dishesPropertyDiv" >
<div class="assortment_all">
<c:if test="${dishesParamVOList !=null && dishesParamVOList.size() >0 }">
<c:forEach items="${dishesParamVOList }" var="dishesParamVO">
<div class="control-group assortment_small border-bottom">
<label for="附加类名" class="col-md-2 control-label">附加类名</label>
<input type="hidden" id="paramId" name="paramId" value="${dishesParamVO.id }" >
<div class="col-md-9 dishesParamClassList">
<input type="text" id="paramName" name="paramName" value="${dishesParamVO.name }" class="form-control" style="width: 70%"/>
</div>
<div class="dell_assortment" style="margin-left: -10px; margin-top: -3px;" id="dellMonthCard">
<span class="title_name dell_dishesParam" paramId="${dishesParamVO.id }">删除</span>
<span class="konck_icon konck_i"></span>
</div> <div class="dishesParam_parent">
<c:forEach items="${dishesParamVO.dishesParamItemList }" var="dishesParamItem">
<div class="activity_class">
<div class="col-md-4 nameClassList">
<label>
附加属性
</label>
</div>
<div class="col-md-5 dishesParamClassList">
<label>属性名称：</label>
<input type="hidden" id="itemId" name="itemId" value="${dishesParamItem.id }" >
<input type="text" id="itemName" name="itemName" value="${dishesParamItem.name }" class="form-control inputClassList"/>
</div>
<div class="col-md-6 dishesParamClassList">
<label>价格：</label>
<input type="text" id="itemAdditionPrice" name="itemAdditionPrice" value="${dishesParamItem.additionPrice }" class="form-control inputClassList" />元
</div>
<div class="dell_all" style="margin-left: -10px; margin-top: -3px;">
<span class="title_name dell_dishesItem" itemId="${dishesParamItem.id }">删除</span>
<span class="konck_icon konck_i"></span>
</div>
</div>
</c:forEach>
</div> <div class="operty_add">
<span class="title_name add_coupon">附加属性</span>
<span class="konck_icon konck_h"></span>
</div>
</div>
</c:forEach>
</c:if>
</div>
<div class="add_assortment_all">
<span class="title_name add_coupon">添加附加分类</span>
<span class="konck_icon konck_h"></span>
</div>
</div>
二，》》》》》js 代码
$(function(){
var standardType = '${standardType}';//1单一规格 2多种规格 0无规格
if(standardType !=null && standardType !=""){
if(standardType==1){
$("#singleDiv").show();
$("#variedDiv").hide();
}else if(standardType==2){
$("#singleDiv").hide();
$("#variedDiv").show();
}else if(standardType==0){
$("#singleDiv").show();
$("#variedDiv").hide();
}
}else{
$("#singleDiv").show();
$("#variedDiv").hide();
}
$("#subUpdate").click(function(){
var singleList = assembleClassName();//附加菜品属性
var standardList = assembleStandard();//规格
$("#singleList").val(singleList);
$("#standardList").val(standardList);
var newStandardType = $("#newStandardType").val();
if(newStandardType==2){
if(standardList==null || standardList=="" || standardList=="[]"){
alert("类型为选多规格时候规格参数必填");
return;
}
}
$.ajax({
url:"${requestScope['struts.actionMapping'].name}",
data:$("#form").serialize(),
type:"POST",
success:function(){
alert("保存成功");
parent.closeWin();
}
});
});
//动态添加附加属性
$('body').on('click','.operty_add',function(){
var dishesParam = '<div class="activity_class">'
+'<div class="col-md-4 nameClassList">'
+'<label>附加属性</label>'
+'</div>'
+'<div class="col-md-5 dishesParamClassList">'
+'<label>属性名称：</label>'
+'<input type="hidden" id="itemId" name="itemId" value=""/>'
+'<input type="text" id="itemName" name="itemName" value="" class="form-control inputClassList"/>'
+'</div>'
+'<div class="col-md-6 dishesParamClassList">'
+'<label>价格：</label>'
+'<input type="text" id="itemAdditionPrice" name="itemAdditionPrice" value="" class="form-control inputClassList" />元'
+'</div>'
+'<div class="dell_all" style="margin-left: -10px; margin-top: -3px;" id="dellMonthCard">'
+'<span class="title_name dell_dishesItem" itemId="">删除</span>'
+'<span class="konck_icon konck_i"></span>'
+'</div>'
+'</div>';
$(this).prev().append(dishesParam);
});
//删除附加属性
$('body').on('click','.dell_dishesItem',function(){
var current = $(this);
var itemId = $(this).attr("itemId");
if(itemId !=null && itemId !=""){
$.ajax({
type : "post",
url : "<%=basePath %>book/dishes/backstageversion/update!deleteParamItemById",
data : {
"itemId" : itemId
},
success : function(data){
if(data.success){
current.parent().parent().remove();
}else{
alert('抱歉删除失败')
}
}
});
}else{
$(this).parent().parent().remove();
}
});
//动态添加附加分类
$('body').on('click','.add_assortment_all',function(){
var assortment='<div class="control-group assortment_small border-bottom">'
+'<label for="附加类名" class="col-md-2 control-label">附加类名</label>'
+'<input type="hidden" id="paramId" name="paramId" value="" />'
+'<div class="col-md-9 dishesParamClassList">'
+'<input type="text" id="paramName" name="paramName" value="" class="form-control" style="width: 70%"/>'
+'</div>'
+'<div class="dell_assortment" style="margin-left: -10px; margin-top: -3px;" id="dellMonthCard">'
+'<span class="title_name dell_dishesParam" paramId="">删除</span>'
+'<span class="konck_icon konck_i"></span>'
+'</div>'
+'<div class="dishesParam_parent">'
+'<div class="activity_class">'
+'<div class="col-md-4 nameClassList">'
+'<label>附加属性</label>'
+'</div>'
+'<div class="col-md-5 dishesParamClassList">'
+'<label>属性名称：</label>'
+'<input type="hidden" id="itemId" name="itemId" value=""/>'
+'<input type="text" id="itemName" name="itemName" value="" class="form-control inputClassList"/>'
+'</div>'
+'<div class="col-md-6 dishesParamClassList">'
+'<label>价格：</label>'
+'<input type="text" id="itemAdditionPrice" name="itemAdditionPrice" value="" class="form-control inputClassList" />元'
+'</div>'
+'<div class="dell_all" style="margin-left: -10px; margin-top: -3px;" id="dellMonthCard">'
+'<span class="title_name dell_dishesItem" itemId="">删除</span>'
+'<span class="konck_icon konck_i"></span>'
+'</div>'
+'</div>'
+'</div>'
+'<div class="operty_add">'
+'<span class="title_name add_coupon">附加属性</span>'
+'<span class="konck_icon konck_h"></span>'
+'</div>'
+'</div>';
$(this).prev().append(assortment);
});
//删除附加分类
$('body').on('click','.dell_dishesParam',function(){
var current = $(this);
var paramId = $(this).attr("paramId");
if(paramId !=null && paramId !=""){
$.ajax({
type : "post",
url : "<%=basePath %>book/dishes/backstageversion/update!deleteDishesParamById",
data : {
"paramId" : paramId
},
success : function(data){
if(data.success){
current.parent().parent().remove();
}else{
alert('抱歉删除失败');
}
}
});
}else{
$(this).parent().parent().remove();
}
});
//组装附加菜品属性
var assembleClassName = function(){
var dishesId=$("#id").val();//菜品ID
var dataParam = new Array();
//遍历分类
$(".assortment_small").each(function(){
var dishesParam = new Object();
var id = $(this).find("input[name='paramId']").val();
var name = $(this).find("input[name='paramName']").val();
dishesParam.id=id;
dishesParam.name=name;
dishesParam.dishesId=dishesId;
//遍历分类里面的附加属性
var subItem = new Array();
$(this).find(".activity_class").each(function(){
var dishesParamItem = new Object();
var itemId = $(this).find("input[name='itemId']").val();
var itemName = $(this).find("input[name='itemName']").val();
var itemAdditionPrice = $(this).find("input[name='itemAdditionPrice']").val();
dishesParamItem.id=itemId;
dishesParamItem.name=itemName;
dishesParamItem.additionPrice=itemAdditionPrice;
dishesParamItem.dishesParamId=dishesParam.id;
dishesParamItem.dishesId=dishesId;
subItem.push(dishesParamItem);
});
dishesParam.dishesParamItemList=subItem;
dataParam.push(dishesParam);
});
var singleList = JSON.stringify(dataParam);
return singleList;
};
//动态添加多种规格
$('body').on('click','.standard_add',function(){
var standard ='<div class="standard_class">'
+'<div class="col-md-5 dishesParamClassList">'
+'<label>规格：</label>'
+'<input type="hidden" id="standardId" name="standardId" value="" />'
+'<input type="text" id="formName" name="formName" value="" class="form-control inputClassList"/>'
+'</div>'
+'<div class="col-md-6 dishesParamClassList">'
+'<label>价格：</label>'
+'<input type="text" id="standardPrice" name="standardPrice" value="" class="form-control inputClassList" />元'
+'</div>'
+'<div class="dell_standard" style="margin-left: -10px; margin-top: -3px;" id="dellMonthCard">'
+'<span class="title_name dell_dishesStandard" standardId="" >删除</span>'
+'<span class="konck_icon konck_i"></span>'
+'</div>'
+'</div>';
$(this).prev().append(standard);
});
//动态删除多种规格
$('body').on('click','.dell_dishesStandard',function(){
var current = $(this);
var standardId = $(this).attr("standardId");
if(standardId !=null && standardId !=""){
$.ajax({
type : "post",
url : "<%=basePath %>book/dishes/backstageversion/update!deleteDishesStandardById",
data : {
"standardId" : standardId
},
success : function(data){
if(data.success){
current.parent().parent().remove();
}else{
alert('抱歉删除失败');
}
}
});
}else{
$(this).parent().parent().remove();
}
});
//组装多规格
var assembleStandard = function(){
var dishesId=$("#id").val();//菜品ID
var dataParam = new Array();
$(".standard_class").each(function(){
var dishesStandard = new Object();
var id = $(this).find("input[name='standardId']").val();
var name = $(this).find("input[name='formName']").val();
var price = $(this).find("input[name='standardPrice']").val();
dishesStandard.id = id;
dishesStandard.name = name;
dishesStandard.price = price;
dishesStandard.dishesId = dishesId;
dataParam.push(dishesStandard);
});
var standardList = JSON.stringify(dataParam);
return standardList;
};
});
三，页面效果
四，》》》》json 格式数据
规格
[{"id":"","name":"大份","price":"15","dishesId":"4629"},{"id":"","name":"中份","price":"12","dishesId":"4629"},{"id":"","name":"小份","price":"10","dishesId":"4629"}]
属性
[{"id":"3","name":"味道","dishesId":"4629","dishesParamItemList":[{"id":"7","name":"加糖","additionPrice":"1.0","dishesParamId":"3","dishesId":"4629"},{"id":"8","name":"加酸","additionPrice":"2.0","dishesParamId":"3","dishesId":"4629"}]},{"id":"4","name":"温度","dishesId":"4629","dishesParamItemList":[{"id":"9","name":"加热","additionPrice":"0.5","dishesParamId":"4","dishesId":"4629"},{"id":"10","name":"加冰","additionPrice":"0.2","dishesParamId":"4","dishesId":"4629"}]}]
其中dishesId 菜品ID 表的设计和 和对象代码我就不贴出来了。可以看json 格式数据去设计表。
js实现配置菜品规格时，向后台传一个json格式字符串的更多相关文章
- asp.net MVC 给Controler传一个JSon集合，后台通过List<Model>接收
需求情景 View层经常需要通过Ajax像后台发送一个json对象的集合,但是在后台通过List<Model>无法接收,最后只能通过妥协的方式,在后台获取一个json的字符串,然后通过Js ...
- Web应用启动时，后台自动启动一个线程（转）
原文:http://blog.sina.com.cn/s/blog_6810dfc20101ipzq.html Web应用启动时,后台自动启动一个线程 (1)前言 前几天,manager问道一个问题: ...
- JSON（二）——JavaScript中js对象与JSON格式字符串的相互转换
首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是j ...
- js数组作为参数用ajax向后台传参数
/*前台往后台传参数时,可以这样写*/ var chessId = "123"; var i=0; var data = []; /*添加单个参数*/ data.push({nam ...
- ajax请求后台，返回json格式数据，模板！
添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术.将返回的json格式数据,添加到select标签下. <script type="te ...
- 关于tomcat7配置maxPostSize=“0”时，后台无法接收前台参数的问题
Post提交参数时,如果参数值的长度太长,后台通过Map<String, String[]> requestParameterMap=request.getParameterMap();获 ...
- Web应用启动时，后台自动启动一个线程
(1)前言 前几天,manager问道一个问题:能不能实现类似于cron的后台管理方式.问题解决后,想对这几个问题进行一下简单的总结.以便抛砖引玉!首先简单的提及一下cron. Cron,计划任务,是 ...
- 微信小程序-展示后台传来的json格式数据
昨天粗粗的写了下后台数据传到微信小程序显示,用来熟悉这个过程,适合刚入门学习案例: 需了解的技术:javaSE,C3p0,jdbcTemplate,fastjson,html,javaScript,c ...
- 【公司动态添加行】前台穿一个json的字符串到后台，并解析
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
随机推荐
- javascript当中局部变量和全局变量
2)局部变量和全局变量 马克-to-win:浏览器里面 window 就是 global,通常可以省.nodejs 里没有 window,但是有个叫 global 的.例 3.2.1<html& ...
- Bugku-web进阶之phpcmsV9（一个靶机而已，别搞破坏。flag在根目录里txt文件里）
phpcmsV9 一个靶机而已,别搞破坏. flag在根目录里txt文件里 http://123.206.87.240:8001/
- python evel()的用法
老生常谈部分: eval(expression[, globals[, locals]]) expression -- 表达式. globals -- 变量作用域,全局命名空间,如果被提供,则必须是一 ...
- django-cors-headers
django-cors-headers介绍 一个Django应用程序,向响应头中添加跨域资源共享(CORS)头.这允许从其他来源向Django应用程序发出浏览器内请求,当然也可以自定义中间件然后添加响 ...
- 【C语言】将两个字符串连接起来
#include<stdio.h> int main() { ] = "I "; ] = "am a student"; int i, j, n; ...
- python函数编程闯关总结
文件处理相关 1,编码问题 (1)请问python2与python3中的默认编码是什么? python .x默认的字符编码是ASCII,默认的文件编码也是ASCII python .x默认的字符编码是 ...
- npm报错This is probably not a problem with npm. There is likely additional logging
使用webstorm开发时,遇到npm 报错,于是尝试了如下所有的方法,不完全统计. https://blog.csdn.net/liu305088020/article/details/791823 ...
- iOS 优化ipa包，减小安装包大小
https://www.jianshu.com/p/a49d59b01669 项目打包之后.ipa包的大小是118.9M,上传到App Store后iPhone6s上显示85.5M,下载时间太长,所以 ...
- android开发基础（ViewModel）
今天学习了ViewModel,其是Jetpack的一个类,它可以将界面中的数据独立出来,这样不会造成页面上信息的丢失. 我跟着视频做了一个简单的实例: 首先创建项目的时候它和以往的项目会有些不一样,因 ...
- Java 倒入文章显示前n个单词频率
package com_1; import java.io.FileNotFoundException; import java.io.FileReader; import java.io.IOExc ...