表单上传key,value值，在不清楚key值情况下，后台接收并且解释。

最新推荐文章于 2023-04-10 17:07:25 发布

蓝影灵

最新推荐文章于 2023-04-10 17:07:25 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/weixin_38948287/article/details/93757724

版权

一、表单上传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 : {
				  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++;
			     layer.confirm('评论成功',{btn: ['确定', '取消提示'],title:"提示"}, function(){
                 details();
                 });
			    }else{
			    	layer.alert(res.msg);
			    }
			}
		}); 
	}
	
	
function details(){
		var url = cxt+"/wechat/oil/stationDetails?openId="+openId+"&userType="+mutype+"&staId="+STATION_ID;
		window.location.replace(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= this.get32UUID();
     	   	 /*保存评论主表信息*/
     		  PageData pd = new PageData();
     		  pd.put("COMMENT", mapo.get("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", pdm.getString("ID"));
              commentService.save(pd);
          	 /*保存分数评论详细分数表*/
            for (Entry<String, Object> entry : mapo.entrySet()) {
            	if(NumberUtils.isNumber(entry.getKey())){
            	  PageData pdd = new PageData();
            	  pdd.put("OC_ID",OC_ID);	//主键
            	  pdd.put("OCI_ID", Integer.parseInt(entry.getKey()));
            	  pdd.put("MARK", Integer.parseInt(entry.getValue().toString())); 
            	  commentdetailsService.save(pdd);	
                }   
	         } 
			 map.put("msg", "success");
		  }catch(Exception e){
			  e.printStackTrace();
			  map.put("msg", "操作异常："+e.getMessage());
		  }
		  return AppUtil.returnObject(new PageData(), map);
	  }

二、 window.location.replace与 window.location.href区别

有3个页面 a,b,c

如果当前页面是c页面，并且c页面是这样跳转过来的：a->b->c

1：b->c 是通过window.location.replace("..xx/c") 此时b页面的url会被c页面代替，并且点击后退按钮时会回退到a页面（最开始的页面）

2：b->c是通过window.location.href("..xx/c") 此时b页面的路径会被c页面代替，但是点击回按钮后页面回退的是b页面

在上面中，我们评论成功了，跳转到评论详情页面，一旦用户按手机返回键，就会调回评论表单页面，导致重复提交，为了避免此情况，最好有window.location.replace替换了历史页面。

function details(){
var url = cxt+"/wechat/oil/stationDetails?openId="+openId+"&userType="+mutype+"&staId="+STATION_ID;
window.location.replace(url);
}

三、星星(markingSystem.js)JS插件用法，此插件修改过。

一、引入js

属性解释如下：

comId: nid+'txt'

将分数设置到隐藏的input上，便于后台接收分数。

          <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>

markingSystem.js附件：看资源markingSystem.js

蓝影灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单上传key,value值，在不清楚key值情况下，后台接收并且解释。

一、表单上传key,value值，在不清楚key值情况下，后台接收并且解释。因为html页面中的name是变化的，我们后台没有办法用名字去接收。这种情况，可以采用此方法：一、页面name值是变化的、value值也是变化的，并不知道有几个这样情况的input。二、将整个表单序列化成json字符串，传到后台再解释。方法如此：三、采用ajax请求，...
复制链接

扫一扫