ajax的异步传输

最新推荐文章于 2021-08-05 13:55:32 发布

闻雨轩少爷

最新推荐文章于 2021-08-05 13:55:32 发布

阅读量762

点赞数

本文链接：https://blog.csdn.net/yeyujiao8888/article/details/49470363

版权

有时我们会遇见需要从前台向后台传入多条数据（对象），数据库进行批量操作增、删、改、查。

html代码如下：

<body style="height:100%; width:100%">
	<div id="allDiv">
		<div id="topDiv_4G"  style="height:100px;"></div>
		
	    <div id="mainDiv_4G" style="height: 342px; ">
	    	<div  style="height: 40px;border: 1px solid #4C9ED9;"><center><span id="loggingLabel">4G支撑参数配置</span></center></div>
	    	<div class="config_4G">
		    	<label id="label_1">4G用户判定</label><label>
		    	</label>：4G网络产生过业务时间大于等于</label>
		    	<input type="text" class="config_input_4G" id="input_1"></input>
		    	<label>天</label>
	    	</div>
	    	<div  class="config_4G">
		    	<label id="label_2">栅格大小设置</label><label>
		    	</label>：</label>
		    	<input type="text" class="config_input_4G" id="input_2_1"></input>
		    	<label>m X</label>
		    	<input type="text" class="config_input_4G" id="input_2_2"></input>
		    	<label>m</label>
	    	</div>
	    	<div  class="config_4G">
		    	<label id="label_3">低驻留比栅格</label><label>
		    	</label>：4G用户在2&3G日均流量大于</label>
		    	<input type="text" class="config_input_4G" id="input_3_1"></input>
		    	<label>MB、流量驻留比小于</label>
		    	<input type="text" class="config_input_4G" id="input_3_2"></input>
		    	<label>%、时长驻留比小于</label>
		    	<input type="text" class="config_input_4G" id="input_3_3"></input>
		    	<label>%</label>
	    	</div>
	    	<div  class="config_4G">
		    	<label id="label_4">2G高倒流小区(时长)</label><label>
		    	</label>：</label>
		    	<input type="text" class="config_input_4G" id="input_4_1"></input>
		    	<label>时间内,2G小区下4G用户产生的时长大于</label>
		    	<input type="text" class="config_input_4G" id="input_4_2"></input>
		    	<label>h、4G用户数大于</label>
		    	<input type="text" class="config_input_4G" id="input_4_3"></input>
	    	</div>
	    	<div  class="config_4G">
		    	<label id="label_5">3G高倒流小区(时长)</label><label>
		    	</label>：</label>
		    	<input type="text" class="config_input_4G" id="input_5_1"></input>
		    	<label>时间内,3G小区下4G用户产生的时长大于</label>
		    	<input type="text" class="config_input_4G" id="input_5_2"></input>
		    	<label>h、4G用户数大于</label>
		    	<input type="text" class="config_input_4G" id="input_5_3"></input>
	    	</div>
	    	<div  class="config_4G">
		    	<label id="label_6">2G高倒流小区(流量)</label><label>
		    	</label>：</label>
		    	<input type="text" class="config_input_4G" id="input_6_1"></input>
		    	<label>时间内,4G用户在2G小区产生的流量大于</label>
		    	<input type="text" class="config_input_4G" id="input_6_2"></input>
		    	<label>MB</label>
	    	</div>
	    	<div  class="config_4G">
		    	<label id="label_7">3G高倒流小区(流量)</label><label>
		    	</label>：</label>
		    	<input type="text" class="config_input_4G" id="input_7_1"></input>
		    	<label>时间内,4G用户在2G小区产生的流量大于</label>
		    	<input type="text" class="config_input_4G" id="input_7_2"></input>
		    	<label>MB</label>
	    	</div>
		    	<div>
		    	<input type="button" value="修改" class="input_button_4G" style="height: 30px;" οnclick="update4G_config_Message()"/>
		    	</div>
	    </div>
	    
	    <div id="bottonDiv_4G" style="height:138px;">
	    </div>
	</div>
</body>

js中代码如下：

function onclickMenu(pageNo){
	var jsonStr = [{'name':$('#label_1').text(), 'data':$('#input_1').val()} ,
	               {'name':$('#label_2').text(), 'data':$('#input_2_1').val(),'time':$('#input_2_2').val()},
	               {'name':$('#label_3').text() , 'data':$('#input_3_1').val(),'time':$('#input_3_2').val(),'number':$('#input_3_3').val()},
	               {'name':$('#label_4').text() , 'data':$('#input_4_1').val(),'time':$('#input_4_2').val(),'number':$('#input_4_3').val()},
	               {'name':$('#label_5').text() , 'data':$('#input_5_1').val(),'time':$('#input_5_2').val(),'number':$('#input_5_3').val()},
	               {'name':$('#label_6').text() , 'data':$('#input_6_1').val(),'time':$('#input_6_2').val()},
	               {'name':$('#label_7').text() , 'data':$('#input_7_1').val(),'time':$('#input_7_2').val()}]
	$.ajax({
		type: "post",
		url: path+'/systemConfigureController/update4GsupportConfig.do',   
		dataType : 'json',
		async: false,
		data : {"mydata":JSON.stringify(jsonStr)},//这个是重点！需要把js对象进行json序列化，不然无法传递到服务端。
		success: function (data, textStatus) {
				if(data){
					$.messager.alert("提示","配置4G支撑参数成功！！");
				}else{
					$.messager.alert("提示","配置4G支撑参数失败！！");
				}
	        },
	        complete: function (XMLHttpRequest, textStatus) {
	        	
	        },
	        error: function (e) {
	        	 $.messager.alert("提示","配置4G支撑参数失败！！");
	        }
	});
}

控制层代码如下：

@RequestMapping("update4GsupportConfig")
	public void update4GsupportConfig(HttpServletRequest request, HttpServletResponse response){
		String jsonStr = request.getParameter("mydata");
		JSONArray jsonArray = JSONArray.fromObject(jsonStr);
		boolean isTrue = false;
		List<ParameterSetting> list = new ArrayList<ParameterSetting>();
		for(int i=0;i<jsonArray.size(); i++){
			ParameterSetting parameterSetting = new ParameterSetting();
			JSONObject jsonJ = jsonArray.getJSONObject(i);
			if(jsonJ.containsKey("name")){
				String name = jsonJ.getString("name");
				parameterSetting.setName(name);
			}
			if(jsonJ.containsKey("data")){
				String data = jsonJ.getString("data"); 
				parameterSetting.setData(data);
			}
			if(jsonJ.containsKey("time")){
				String time = jsonJ.getString("time");
				parameterSetting.setTime(time);
			}
			if(jsonJ.containsKey("number")){
				String number = jsonJ.getString("number");
				parameterSetting.setNumber(number);
			}
			list.add(parameterSetting);
		}
		isTrue = systemConfigureService.updateMessage(list);
		if(isTrue){
			systemConfigureService.insertSystemLogging((String) request.getSession().getAttribute("userName"), "4G支撑参数配置", "成功");		
		}else{
			systemConfigureService.insertSystemLogging((String) request.getSession().getAttribute("userName"), "4G支撑参数配置", "失败");		
		}
		try {
			response.getWriter().print(isTrue);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

数据库xml代码如下：

<!-- 修改配置文件 -->
	<update id="updateMessage" parameterType="com.hrtel.systemConfigure.entity.ParameterSetting" >
		<foreach collection="list" index="index" item="items" open="" close="" separator=";">
			UPDATE parameter_setting
			<set>
				<if test="items.name!=null and items.name!=''">
					name = #{items.name},
				</if>
				 <if test="items.data!=null and items.data!='' ">     
	            	data = #{items.data},      
	             </if>  
	             <if test="items.time!=null and items.time!='' ">     
	            	time = #{items.time},     
	             </if> 
	             <if test="items.number!=null and items.number!='' ">     
	            	number = #{items.number}     
	             </if>     
			</set> 
			where name = #{items.name}
		</foreach>
	</update>