j2eeSSH简单利用JSON实现异步查询
2014-07-01 23:10
337 查看
简单的异步,根据多种条件查询,统计出符合条件的结果统计数量,利用JSON传输数据,把体统计的数量(数据库查出)拼装成JSON,传给JSP页面,在根据传过来的JSON数据进行显示。当查询条件变动或者修改,再点击查询按钮不需要整个页面刷新,只需下面显示结果的部分标签区域刷新,另外一大优点是如果不用异步点击查询按钮之后之前填写好的查询条件会清除,异步之后不会有任何改动,比较人性化,用户体验大大提升。
望加指点。
</pre><p>查询条件查询按钮代码:</p><p><input type="submit" value="查找" onclick="submitForm()" /></p><p><span style="white-space:pre"></span>JS代码:</p><p><span style="white-space:pre"></span></p><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页面显示代码:
<span id="th1"></span><pre name="code" class="html"><span id="th2"></span><pre name="code" class="html"><span id="th3"></span><pre name="code" class="html"><span id="th4"></span><pre name="code" class="html"><span id="th5"></span>
望加指点。
相关文章推荐
- j2eeSSH利用JSON实现异步查询,根据条件查询出结果,实现结果部分局部刷新保留查询结果
- Ajax中利用jQuery简单实现异步交互
- EBS Form开发利用QUERY_FIND来实现最简单的查询功能
- 使用ajax、pageHelpler分页插件、利用json数据特性实现分页查询
- jsonp 跨域查询数据返回json,超简单实现
- 简单使用Ajax实现异步查询用户名是否被占用
- 利用Kotlin的协程实现简单的异步加载详解
- php简单实现查询数据库返回json数据(返回json数据函数实例)
- EBS Form开发利用QUERY_FIND来实现最简单的查询功能(2)
- php简单实现查询数据库返回json数据
- 【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回
- 【C#】对异步请求处理程序IHttpAsyncHandler的理解和分享一个易用性封装 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法 【手记】手机网页弹出层后屏蔽底层的滑动响应 【手记】ASP.NET提示“未能创建类型”处理 【Web】一个非常简单的移动web消息框 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
- Asp.net_JQuery+Json实现简单据查询页面
- Jquery+Json+ajax实现异步查询显示数据
- [C#]利用 DynamicLinq 实现简单的动态表达式构建查询
- 在easyUI中把form表单转换成json数据利用datagrid的load方法实现条件查询
- 利用SpEL 表达式实现简单的动态分表查询
- 利用反射机制实现简单数据查询
- 利用Gson实现简单的json字符串解析
- JDBC 利用反射技术将查询结果封装为对象(简单ORM实现)