j2eeSSH简单利用JSON实现异步查询

╰+哭是因爲堅強的太久メ 2022-08-24 08:46 75阅读 0赞

简单的异步，根据多种条件查询，统计出符合条件的结果统计数量，利用JSON传输数据，把体统计的数量(数据库查出)拼装成JSON，传给JSP页面，在根据传过来的JSON数据进行显示。当查询条件变动或者修改，再点击查询按钮不需要整个页面刷新，只需下面显示结果的部分标签区域刷新，另外一大优点是如果不用异步点击查询按钮之后之前填写好的查询条件会清除，异步之后不会有任何改动，比较人性化，用户体验大大提升。

</pre>查询条件查询按钮代码：<input type="submit" value="查找" οnclick="submitForm()" />JS代码：<pre code_snippet_id="414648" snippet_file_name="blog_20140702_3_8111299" name="code" class="javascript">function submitForm() {
 				 startRequest(1);
 		}

//开始异步请求
    		function startRequest() {  		  
    			//取得页面参数值，作为查询条件传到后台进行查询
    			 var startTime = document.getElementById("startdate").value;	//开始时间
    			 var endTime = document.getElementById("enddate").value;	//结束时间
    			 var state = document.getElementById("state").value;	
    			 var eid = document.getElementById("eid").value;	
    			 var CPhone = document.getElementById("receivePhone").value;	
    			 var dptId = document.getElementById("dptId").value;	
    			 var cbNo = document.getElementById("sellerCode").value;	//商家编号
    			 var sellerName = document.getElementById("sellerName").value;	//商家名称 
    				   	
    			 xmlHttp.onreadystatechange = function() {	 
    				handleStateChange();
    			 };
    			 xmlHttp.open("POST","pointInOrderAction!findTotalAgencyOrder",true); //请求地址,true表示开启异步,中间为请求地址，非异步就为form的action的提交地址，下面会给出findTotalAgencyOrder方法
    			 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    			 xmlHttp.send("startTime=" + startTime + "&endTime="+endTime + "&state="+state + "&eid="+eid
    				  + "&CPhone="+CPhone+ "&dptId="+dptId+ "&cbNo="+cbNo+ "&sellerName="+sellerName);   //发送请求参数，action中setget
    		}

<pre name="code" class="java">public void findTotalAgencyOrder() {
 		
 		HttpServletResponse response = ServletActionContext.getResponse();
 		String sbuf = pointInOrderService.totalAgencyOrder(str);
 	 	try {
 			response.setContentType("text/html;charset=UTF-8");
 			response.getWriter().println(sbuf); //把数据传到jsp页面
 		} catch (IOException e) {
 			e.printStackTrace();
 		}	
 	}

public String totalAgencyOrder(String str) {   //pointInOrderService.totalAgencyOrder中代码		
    	int totalAgency = dao.findtotalAgency(); //数据库查找出的数,此行为伪代码
    	int totalDaodianAgency = dao.findtotalAgency(); //数据库查找出的数,此行为伪代码
    	int totalGuoqiAgency = dao.findtotalAgency(); //数据库查找出的数,此行为伪代码
    	int totalQuhuoAgency = dao.findtotalAgency(); //数据库查找出的数,此行为伪代码
    	int totalJushouAgency = dao.findtotalAgency(); //数据库查找出的数,此行为伪代码
    		//拼装JSON
    		StringBuffer strBuffer = new StringBuffer();
    		strBuffer.append("{");
    		strBuffer.append("\"totalDaodian\":");
    		strBuffer.append(totalDaodianAgency);
    		strBuffer.append(",");
    		strBuffer.append("\"totalGuoqi\":");
    		strBuffer.append(totalGuoqiAgency);
    		strBuffer.append(",");
    		strBuffer.append("\"totalQuhuo\":");
    		strBuffer.append(totalQuhuoAgency);
    		strBuffer.append(",");
    		strBuffer.append("\"totalJushou\":");
    		strBuffer.append(totalJushouAgency);
    		strBuffer.append(",");
    		strBuffer.append("\"totalAll\":");
    		strBuffer.append(totalAgency);
    		strBuffer.append("}");
    		//json结束
    		
    		return strBuffer.toString();
    	}

<pre name="code" class="javascript">//处理显示
 				function handleStateChange() {
 					if (xmlHttp.readyState == 4) {
 						if (xmlHttp.status == 200) {
 							var text = (xmlHttp.responseText); //接收action中的JOSN传过来的数据
 							var jsonObj = eval('(' + text + ')');
 							var jsonObject = JSON.parse(text);	 //转化JOSN格式，JAVA格式转为JSJson，根据该对象直接取值，根据KEY值，直接JS赋值
 					 document.getElementById("th1").innerText = jsonObject.totalDaodian;
 					 document.getElementById("th2").innerText = jsonObject.totalGuoqi;
 					 document.getElementById("th3").innerText = jsonObject.totalQuhuo;
 					 document.getElementById("th4").innerText = jsonObject.totalJushou;
 					 document.getElementById("th5").innerText = jsonObject.totalAll;
 							}
 						}
 					}

<pre name="code" class="html">JSP页面显示代码：

望加指点。