表单上传key,value值，在不清楚key值情况下，后台接收并且
解释。
⼀、表单上传key,value值，在不清楚key值情况下，后台接收并且解释。
因为html页⾯中的name是变化的，我们后台没有办法⽤名字去接收。这种情况，可以采⽤此⽅法：
⼀、页⾯name值是变化的、value值也是变化的，并不知道有⼏个这样情况的input。
⼆、将整个表单序列化成json字符串，传到后台再解释。⽅法如此：
三、采⽤ajax请求，在此时可以并⼊其他普通数值。
四、后台接收并且解释。
当作普通字符串传递到后台，然后转成Json对象，最后遍历去除对应的值
五、页⾯代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>评价晒单</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/> <meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<link href="${cxt!}/static/wxweb/oil/css/appraise.css" rel="stylesheet" type="text/css"/>
<!-- <link media="screen" href="${cxt!}/static/wxweb/oil/css/grade.css" type="text/css" rel="stylesheet" /> --> <script type="text/javascript" src="${cxt!}/static/wxweb/oil/js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="${cxt!}/static/wxweb/oil/js/jquery-latest.pack.js"></script>
<script type="text/javascript" src="${cxt!}/static/wxweb/oil/js/grade.js" ></script> -->
<script type="text/javascript" src="${cxt!}/static/wxweb/oil/js/markingSystem.js?v=1.0.3"></script>
<script src="${cxt!}/static/wxweb/wechat/layui/layui.all.js"></script>
<script src="${cxt!}/static/wxweb/wechat/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="aui-flexView">
<header class="aui-navBar aui-navBar-fixed">
<a href="javascript:history.back();" class="aui-navBar-item">
<i class="icon icon-return"></i>
</a>
<div class="aui-center">
<span class="aui-center-title">评论详情</span>
</div>
</header>
<section class="aui-scrollView">
<form id="form" name="form" method="post">
<div class="aui-flex aui-flex-bg">
<div class="aui-flex-goods">
<%if (station!=null && station.IMAGEURL!=null && station.IMAGEURL!=""){%>
<img src="${cxt!}/uploadFiles/uploadImgs/${station.IMAGEURL!}">
<%}else{%>
<img src="${cxt!}/static/wxweb/oil/images/goods-img.png">
<%}%>
<%}%>
</div>
<div class="aui-Input-box">
<textarea id="comment" name="comment">不错不错不错商品⾮常好</textarea> </div>
</div>
<div class="aui-flex-box">
<div class="aui-goods-st">服务评星</div>
<div id="doPoint" class="doPoint">
<p>请点击以下星级进⾏评论：</p>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<% var i = 1;
for(item in commentItem){%>
<tr>
<th>${item.ITEM_NAME!}：</th>
<td id="${item.ID!}">
<input name="${item.ID!}" id="${item.ID!}txt" value="0" type="hidden"/>
<script>
var nid = "${item.ID!}";
$("#"+nid).markingSystem({
backgroundImageInitial: '${cxt!}/static/wxweb/oil/images/star_hollow.png', backgroundImageOver: '${cxt!}/static/wxweb/oil/images/star_solid.png', num: 5,
havePoint: false,
haveGrade: false,
unit: '星',
grade: 0,
height: 20,
width: 20,
canClick: true,
comId: nid+'txt',
});
</script>
</td>
</tr>
<%i++;}%>
</tbody>
</table>
</div>
</div>
</form>
</section>
<button type="submit" class="button" onclick="commentSubmit();">提交</button>
</section>
<script>
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// 通过下⾯这个API隐藏右上⾓按钮
WeixinJSBridge.call('hideOptionMenu');
});
var cxt = "${cxt!}";
var openId = "${pd.openId!}";
var mutype = "${pd.userType!}";
var mtype = "${pd.type!}";
var STATION_ID = "${pd.ID!}";
var flag=0;
/
/查询列表信息
function commentSubmit(){
if(flag>0){layer.msg("请勿重复提交！");return false;}
var url = cxt+"/wechat/oil/commentSubmit?_"+$.now();
layer.load(2);
$.ajax({
type : 'POST',
url : url,
data : {
data : {
openId:openId,
userType:mutype,
type:mtype,
STATION_ID:STATION_ID,
comments:form2JsonString()
},
dataType : 'json',
async : true,
cache : false,
error : function(res) {
layer.closeAll("loading");
layer.alert('请求错误');
},
success : function(res) {
layer.closeAll("loading");
if(res && res.msg=='success'){
flag++;
details();
});
}else{
layer.alert(res.msg);
}
js获取json的key和value
}
});
}
function details(){
var url = cxt+"/wechat/oil/stationDetails?openId="+openId+"&userType="+mutype+"&staId="+STATION_ID; place(url);
}
/** 表单序列化成json字符串的⽅法 */
function form2JsonString() {
var paramArray = $('#form').serializeArray();
/*请求参数转json对象*/
var jsonObj={};
$(paramArray).each(function(){
jsonObj[this.name]=this.value;
});
// json对象再转换成json字符串
return JSON.stringify(jsonObj);
}
</script>
</body>
</html>
后台接收代码：
/**
* 提交评论
* @param openId
* @param userType ⽤户类型
* @return
*/
@RequestMapping(value = "/commentSubmit")
@ResponseBody
public Object commentSubmit(
@RequestParam(required = true) String openId,
@RequestParam(required = true) Integer userType,
@RequestParam(required = false) Integer type,
@RequestParam(required = false) String STATION_ID,
@RequestParam(required = false) String comments){
Map<String, Object> map = new HashMap<String, Object>();
try{
JSONObject jo = JSONObject.fromObject(comments);
Map<String, Object> mapo =jo;//将json字符串转成json对象后遍历键值对
String OC_ID= 32UUID();
/*保存评论主表信息*/
PageData pd = new PageData();
pd.put("COMMENT", ("comment"));
pd.put("ID",OC_ID); //主键
pd.put("STATION_ID", STATION_ID);
pd.put("SHOWNAME",1);
pd.put("COMTIME", new Date());
pd.put("STATUS", 2);
//通过openid获取会员Id
PageData pdm = new PageData();
pdm.put("OPENID", openId);
pdm=memberService.findByOpenId(pdm);
pd.put("MEMBER_ID", String("ID"));
commentService.save(pd);
/*保存分数评论详细分数表*/
for (Entry<String, Object> entry : Set()) {
if(NumberUtils.Key())){
PageData pdd = new PageData();
pdd.put("OC_ID",OC_ID); //主键
pdd.put("OCI_ID", Integer.Key()));
pdd.put("MARK", Integer.Value().toString()));
commentdetailsService.save(pdd);
}
}
map.put("msg", "success");
}catch(Exception e){
e.printStackTrace();
map.put("msg", "操作异常："+e.getMessage());
}
urnObject(new PageData(), map);
}
⼆、 place与 window.location.href区别
有3个页⾯ a,b,c
如果当前页⾯是c页⾯，并且c页⾯是这样跳转过来的：a->b->c
1：b->c 是通过place("..xx/c") 此时b页⾯的url会被c页⾯代替，并且点击后退按钮时会回退到a页⾯（最开始的页⾯）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论