j2eeSSH利用JSON实现异步查询，根据条件查询出结果，实现结果部分局部刷新保留查询结果

最新推荐文章于 2021-02-21 05:54:37 发布
最新推荐文章于 2021-02-21 05:54:37 发布
阅读量1.2k 收藏
点赞数
分类专栏： 后台技术 文章标签： json 异步 保留查询结果 java xmlhttprequest
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a281246240/article/details/37108869
版权

先来看看我们所要填写的查询条件代码：

<label>   时间: 从
										<input name="startTime" id="startdate"  type="text" /> 到 
								</label>
								<label>
										<input name="endTime" id="enddate" type="text" />
								</label>
								<label>  状态:
					                   <select name="state" id="state">
					                          <option value="1">已出发</option>   
					                          <option value="2">等待中</option>
					                          <option value="3">未出发</option>         			
					                   </select> 
					            </label>
								<label> 手机号:
									   <input name="CPhone" id="receivePhone" type="text" />  
								</label>	
								
					            <label>  编号:
									<input id="sellerCode" name="cbNo" class="form-control input-sm" type="text" />  
						</label>
								<input  type="submit" value="查找" οnclick="submitForm2()" />


JS代码：

function startRequest2(pageNo) {  
					//根据id取得填写条件的值
					 var startTime = document.getElementById("startdate").value;	//开始时间
				   	 var endTime = document.getElementById("enddate").value;	//结束时间
				   	 var state = document.getElementById("state").value;	//状态
				   	 var CPhone = document.getElementById("receivePhone").value;	//手机号
				     xmlHttp2.onreadystatechange = function() {	 //回调函数
					 	handleStateChange2();
					 };
					xmlHttp2.open("POST","pointInOrderAction!findCountAgencyOrders",true);  //请求地址,true表示开启异步
					xmlHttp2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
					xmlHttp2.send("page.currentPage=" + pageNo + "&startTime=" + startTime + "&endTime="+endTime + "&state="+state"+"&CPhone="+CPhone);   //发送请求参数,action中setget即可取到
				}
JS代码： 

			var xmlHttp2 = getXmlHttpRequest();<span style="white-space:pre">	</span>  <span style="color: rgb(0, 130, 0); font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px; ">//创建Ajax核心对象XMLHttpRequest</span>                                                                                             function handleStateChange2() {  if (xmlHttp2.readyState == 4) { <span class="comment" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 130, 0); background-color: rgb(248, 248, 248); font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px; ">//Ajax引擎状态为成功</span><span style="margin: 0px; padding: 0px; border: none; background-color: rgb(248, 248, 248); font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px; "> </span>
						if (xmlHttp2.status == 200) { <span style="color: rgb(0, 130, 0); font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px; background-color: rgb(248, 248, 248); ">//HTTP协议状态为成功</span>
							
							var text = (xmlHttp2.responseText); 
							var jsonObj = eval('(' + text + ')');
							var jsonObject = JSON.parse(text);			 
							var teamTable = document.getElementById("teamTable");
							//清除原有数据
							for ( var i = teamTable.rows.length - 1; i > 0; i--) {
								teamTable.deleteRow(i);
							}
							//处理页面跳转的连接
							var pageDiv = document.getElementById("page") ;//处理分页显示
							var pageTotal = jsonObject.pageInfo.pageTotal ;
						    var currentPage=jsonObject.pageInfo.currentPage ;
						    var pageNo=jsonObject.pageInfo.currentPage ;
							var totalCount=jsonObject.pageInfo.totalCount;  //处理分页显示
							for(var i=0;i<jsonObject.AgencyOrderList.length;i++) {
						     //为表格加一行
							var tr = teamTable.insertRow(i+1);
							//tr.className="exist-address-list"; 
						    //为表格加一个格
							var td = tr.insertCell(0);	 
							td.innerHTML = jsonObject.AgencyOrderList[i].uname; 
							 //为表格加一个格
							var td = tr.insertCell(1);
							td.innerHTML =jsonObject.AgencyOrderList[i].piaoCPhone;
						 	 //为表格加一个格
							var td = tr.insertCell(2);
							td.innerHTML =jsonObject.AgencyOrderList[i].Pointname;
							//为表格加一个格
							var td = tr.insertCell(3);
							td.innerHTML = jsonObject.AgencyOrderList[i].cename + "/" + jsonObject.AgencyOrderList[i].deliveryNo;
							 
					    	 //为表格加一个格
					    	 var td = tr.insertCell(7);
					    	 td.innerHTML = jsonObject.AgencyOrderList[i].updateTime;
						 } 
							var pageHtml =" ";
							pageHtml +=("<EM> "+pageNo+"/"+pageTotal+"页</EM> 共"+totalCount+"条记录");
							if(pageNo<=1){
							pageHtml +=("<EM>首页</EM><EM>上一页</EM>");
							}
							if(pageNo>1){
							pageHtml += "<a href='javascript:startRequest2("+ 1 +")'>首页</a>  " ;     //可以改为上一页   "1"  改为：   (pageNo-1)
						    pageHtml += "<a href='javascript:startRequest2("+ (pageNo-1) +")'>上一页</a>  " ; 
							 } 
							if(pageTotal<=10){
						    for(i = 0 ; i < pageTotal; i++){
						    	if((i+1)==currentPage){
							    	 pageHtml += "<a class='h-highlight' href = 'javascript:startRequest2("+(i+1)+")'>"+(i+1)+"</a>";
							     }
						    	 else{
						    		 pageHtml += "<a href = 'javascript:startRequest2("+(i+1)+")'>"+(i+1)+"</a>";
						    	 }  
				               } 
							 }
							 else{
							 if(currentPage<=3){
							 if(1==currentPage){
								 pageHtml += "<a  class='h-highlight' href = 'javascript:startRequest2("+(1)+")'>"+(1)+"</a> ";
								 }
							 else{
								 pageHtml += "<a href = 'javascript:startRequest2("+(1)+")'>"+(1)+"</a> ";
								 }
							 if(2==currentPage){
								 pageHtml += "<a  class='h-highlight' href = 'javascript:startRequest2("+(2)+")'>"+(2)+"</a> ";
								 }
							 else{
								 pageHtml += "<a href = 'javascript:startRequest2("+(2)+")'>"+(2)+"</a> ";
								 }
							 if(3==currentPage){
								 pageHtml += "<a  class='h-highlight' href = 'javascript:startRequest2("+(3)+")'>"+(3)+"</a> ";
								 }
							 else{
								 pageHtml += "<a href = 'javascript:startRequest2("+(3)+")'>"+(3)+"</a> ";
								 }
							 if(4==currentPage){
								 pageHtml += "<a  class='h-highlight' href = 'javascript:startRequest2("+(4)+")'>"+(4)+"</a> ";
								 }
							 else{
								 pageHtml += "<a href = 'javascript:startRequest2("+(4)+")'>"+(4)+"</a> ";
								 } 
							  pageHtml += "....";
							  if(pageTotal==currentPage){
									 pageHtml += "<a  class='h-highlight' href = 'javascript:startRequest2("+(pageTotal)+")'>"+(pageTotal)+"</a> ";
									 }
								 else{
									 pageHtml += "<a href = 'javascript:startRequest2("+(pageTotal)+")'>"+(pageTotal)+"</a>";
									 } 
							 }
							 else if((pageTotal-3)> currentPage&¤tPage>= 4){
							   pageHtml += "...."; 
							   pageHtml += "<a href = 'javascript:startRequest2("+(currentPage-2)+")'>"+(currentPage-2)+"</a> ";
							   pageHtml += "<a href = 'javascript:startRequest2("+(currentPage-1)+")'>"+(currentPage-1)+"</a> ";
							   pageHtml += "<a class='h-highlight' href = 'javascript:startRequest2("+(currentPage)+")'>"+(currentPage)+"</a> ";
							   pageHtml += "<a href = 'javascript:startRequest2("+(currentPage+1)+")'>"+(currentPage+1)+"</a> ";
							   pageHtml += "<a href = 'javascript:startRequest2("+(currentPage+2)+")'>"+(currentPage+2)+"</a> ";   
							   pageHtml += "....";     
							 }
							 else if(currentPage>=(pageTotal-3)){ 
							   pageHtml += "....";
							   if(pageTotal-4==currentPage){
									 pageHtml += "<a  class='h-highlight' href = 'javascript:startRequest2("+(pageTotal-4)+")'>"+(pageTotal-4)+"</a> ";
									 }
								 else{
									 pageHtml += "<a href = 'javascript:startRequest2("+(pageTotal-4)+")'>"+(pageTotal-4)+"</a> ";
									 }
							   if(pageTotal-3==currentPage){
									 pageHtml += "<a  class='h-highlight' href = 'javascript:startRequest2("+(pageTotal-3)+")'>"+(pageTotal-3)+"</a> ";
									 }
								 else{
									 pageHtml += "<a href = 'javascript:startRequest2("+(pageTotal-3)+")'>"+(pageTotal-3)+"</a> ";
									 }
							   if(pageTotal-2==currentPage){
									 pageHtml += "<a  class='h-highlight' href = 'javascript:startRequest2("+(pageTotal-2)+")'>"+(pageTotal-2)+"</a> ";
									 }
								 else{
									 pageHtml += "<a href = 'javascript:startRequest2("+(pageTotal-2)+")'>"+(pageTotal-2)+"</a> ";
									 }
							   if(pageTotal-1==currentPage){
									 pageHtml += "<a  class='h-highlight' href = 'javascript:startRequest2("+(pageTotal-1)+")'>"+(pageTotal-1)+"</a> ";
									 }
								 else{
									 pageHtml += "<a href = 'javascript:startRequest2("+(pageTotal-1)+")'>"+(pageTotal-1)+"</a> ";
									 }
							   if(pageTotal==currentPage){
									 pageHtml += "<a  class='h-highlight' href = 'javascript:startRequest2("+(pageTotal)+")'>"+(pageTotal)+"</a> ";
									 }
								 else{
									 pageHtml += "<a href = 'javascript:startRequest2("+(pageTotal-4)+")'>"+(pageTotal)+"</a> ";
									 } 
							  }
							 }
							 if(pageNo < pageTotal) {
							   pageHtml += "<a href='javascript:startRequest2("+ (pageNo+1) +")'>下一页 </a>  " ; 
							   pageHtml += " <a href='javascript:startRequest2(" + pageTotal + ")'>尾页</a>";    //可以改为下一页   pageTotal  改为：  (pageNo+1)
							   }
							   if(pageNo==pageTotal){
							   pageHtml +=("<EM>下一页</EM><EM>尾页</EM>");
							}
							pageDiv.innerHTML = pageHtml ;
						}
					}
				}

java代码： 

public void findCountAgencyOrders() throws Exception{
		HttpServletResponse response = ServletActionContext.getResponse();
		if(currpage>0)
		{ 
			Result res = Service.findOrders(page,CPhone,cbNo, state,startTime, endTime);//根据条件查询数据库
			 page=res.getPage();	
			// 如果当前页大于总页数，则当前页减1或当前页设为总页数
			if(currpage>page.getTotalPage())
			{
				page.setCurrentPage(page.getTotalPage());
			}
			else
			{
				page.setCurrentPage(currpage);
			}
			currpage=0;
		}
		Result res = Service.findOrders(page,CPhone, cbNo, state,startTime, endTime);
		page=res.getPage();	
	    List teams =res.getList();
		try {
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println(JsonUtil.JsonPage(teams, page));
		} catch (IOException e) {
			e.printStackTrace();
		}	
	}


java代码，JosonUtil.JsonPage方法： 

public static Object zsAgencyOrderlistToJsonPage(List AgencyOrderList,Page pageInfo) {
		String jsonStr = null;
		StringBuffer strBuffer = new StringBuffer();
		strBuffer.append("{");
		//strBuffer.append("\"pointRechargeRecordList\":[");
		strBuffer.append("\"AgencyOrderList\":[");
		//处理pointRechargeRecordList
		for(int i=0;i<AgencyOrderList.size();i++)
		{
			Object[] temp = (Object[]) AgencyOrderList.get(i); 
			//temp开始
			strBuffer.append("{");
			
			//处理手机号
			strBuffer.append("\"piaoCPhone\":\"");
			strBuffer.append((String)temp[1]);
			strBuffer.append("\","); 
			//状态
			strBuffer.append("\"piosName\":\"");
			strBuffer.append((String)temp[6]);			 	 
			strBuffer.append("\",") ;
					
			//更新时间
			strBuffer.append("\"updateTime\":\"");
			strBuffer.append((String)temp[8]);			 	 
			strBuffer.append("\"") ;
			//team结束
			if(i<AgencyOrderList.size()-1)
			{
			strBuffer.append("},");
			}
			else
			{
				strBuffer.append("}");
			} 
		} 
		//golddetaillist结束
		strBuffer.append("],"); 
		//pageInfo开始
		strBuffer.append("\"pageInfo\":{");
		//处理pageRows 
		strBuffer.append("\"pageRows\":");
		strBuffer.append(pageInfo.getEveryPage());
		strBuffer.append(",");
		//处理currentPage
		strBuffer.append("\"currentPage\":");
		strBuffer.append(pageInfo.getCurrentPage());
		strBuffer.append(",");
		//处理totalCount
		strBuffer.append("\"totalCount\":");
		strBuffer.append(pageInfo.getTotalCount());
		strBuffer.append(",");
		//处理pageTotal
		strBuffer.append("\"pageTotal\":");
		strBuffer.append(pageInfo.getTotalPage());
	 
	    //pageInfo结束
		strBuffer.append("}");
		//json结束
		strBuffer.append("}");
		jsonStr = strBuffer.toString(); 
		return jsonStr;
	}


jsp显示结果表头代码：

 <table id="teamTable" class="bussiness_center" cellpadding="0" cellspacing="0"> 
										<tr style="font-weight: bold;"> 
											
											<th>
												收件人手机号
											</th> 
											
											<th>
												状态
											</th>
											<th>
												类型
											</th>
											<th>
												更新时间
											</th>
										</tr>
						</table>
						<div id="page"></div>

望加指点。


a281246240
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SSH分页,局部刷新
05-09
SSH分页，局部刷新，喜欢的同学可以好好试试，加油哈。
一个简单异步获取json并转成html的实现基于ssh
08-08
ssh搭建的项目,主要实现jsp列表展示,以及异步加载数据的列表展示
ajax 局部刷新
转载资源,方便查询
05-20 147
ajax 局部刷新 下面是整理的 关于ajax 局部刷新的例子： [code="html"] // src http://woooh.com/post/learn_ajax.html var http_request = false; function sendRequest(url, obj) { http_request = false; if (...
J2EE查询条件中的注意事项
小尘
02-16 107
　　在如上图所示的查询中，我们每次进行查询时，除了要保存分销商代码，分销商名称，和开始日期，结束日期外，在分页模式下，也需要保存这些参数传递过去，不然的话，就会出现分页下显示内容为空。 　　在.NET下我通常使用Session变量来保存，而在J2EE环境下，更多的是使用Atrribute来保存，并通过EL表达式取得所需要的参数，二者的原理是一样的。做程序最重要的就是严谨性，而不是单单实现某个...
j2eeSSH简单利用JSON实现异步查询
a281246240的专栏
07-01 573
待更新
PHP中把数据库查询结果输出为json格式简单实例
10-24
主要介绍了PHP中把数据库查询结果输出为json格式简单实例,本文直接给出示例代码,都是非常基础的写法,大家应该一看就明白,需要的朋友可以参考下
多条件无刷新查询示例源码.zip
06-19
无刷新查询技术的核心在于利用Ajax（Asynchronous JavaScript and XML）技术，实现在用户输入查询条件后，后台进行数据处理并返回结果，而无需整个页面重新加载。这种技术可以显著提升网站的响应速度，减少用户等待...
golang实现sql结果集以json格式输出的方法
09-21
主要介绍了golang实现sql结果集以json格式输出的方法,涉及Go语言针对sql结果集的遍历、转换及json格式相关操作技巧,需要的朋友可以参考下
extjs2.0 画的一个带查询条件和查询结果的页面
04-24
在这个场景下，查询条件可能通过一个表单来实现，而查询结果则会用网格或表格来展示。 1. **查询条件**： 在ExtJS中，我们可以使用`Ext.form.FormPanel`创建一个包含输入字段的表单，这些字段对应于查询条件。例如...
Struts2+jQuery（不用JSON）实现局部刷新
07-13
在这个“Struts2+jQuery实现局部刷新”的主题中，我们将探讨如何利用这两者的优势来实现页面的无刷新更新。 1. **Struts2框架介绍**： Struts2是一个基于MVC设计模式的Java Web框架，它提供了良好的结构和可扩展性...
在SSH框架下实现jsp页面的局部刷新（ajax）
SXT_fighting的博客
07-21 3661
在SSH框架下实现jsp页面的局部刷新（ajax）第一种方法：jsp中代码为 <a onclick="loadXMLDoc('ajax/my.jsp')"></a>对应的js: <script type="text/javascript"> var xmlhttp; function loadXMLDoc(url) { xmlhttp=null; if (window.XMLHttpR
SSH框架下的条件查询及查询结果分页
kaka0509的专栏
05-21 2万+
我的SSH框架下的条件查询+分页实现案例
局部刷新如何实现？看我简单实现局部刷新、分页
雷园的博客
11-21 4480
在这里小小推荐下我的个人博客 csdn：雷园的csdn博客 个人博客：雷园的个人博客 简书：雷园的简书 前言 1.感谢大家的关注和阅读，坚持干货不断～～～ 2.今天我们来说一下如何通过ajax实现局部刷新。 应用场景 在Java中，如果我们一个页面中有很多的信息都是从后台传递过来的，但是我们有的地方需有有变动。比如我们在做菜品管理，上下翻页时，我们的分类以及其他的信息一般是不需要刷新，只需要更...
java条件查询数据库_数据库条件查询
weixin_32033241的博客
02-21 890
排序查询/*排序查询:对查询结构进行排序关键字:order by 字段名 [ASC|DESC]ASC:升序(从小到大),默认的DESC:降序(从大到小)*/# 查询所有记录的name和price,结构按照价格 从大到小进行排序SELECT pname,price FROM product ORDER BY price DESC;#1.查询所有商品信息,使用价格排序(降序)SELECT * FROM...
jsp实现局部刷新的一种方法
热门推荐
lovebosom的博客
06-30 2万+
废话不多少，直接上代码：  如下：当点击停用按钮后，前一列启用状态，改为 停用  操作列的停用改为启用。   我要说的是其中一种实现方法是替换文本的方式：   jsp页面代码为： 停用 启用 停用 启用 修改 删除 js事件操作为：红色部分就是替换文本内容 function openOrStop(i
php 查询结果局部刷新,实现详解Ajax+php数据交互并且局部刷新页面
最新发布
06-08
要实现Ajax+PHP数据交互并局部刷新页面，需要以下步骤： 1. 创建一个包含HTML和PHP代码的页面，并在页面顶部引入jQuery库和一个自定义的JavaScript文件。 2. 在JavaScript文件中编写一个Ajax请求的代码，指定请求的URL和请求方法（POST或GET），并定义回调函数。 3. 在PHP文件中编写处理Ajax请求的代码，包括从请求中获取参数、查询数据库、将查询结果转换为JSON格式等。 4. 在回调函数中解析返回的JSON数据，并使用jQuery的DOM操作方法将数据插入到页面中指定的位置，实现局部刷新效果。 下面是一个简单的例子，演示如何使用Ajax和PHP实现查询结果的局部刷新： HTML/PHP页面代码： ```html <html> <head> <title>PHP查询结果局部刷新</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="ajax.js"></script> </head> <body> <h1>查询结果：</h1> <div id="result"></div> <form> <label>输入查询条件：</label> <input type="text" name="keyword" id="keyword"> <input type="button" value="查询" onclick="search()"> </form> </body> </html> ``` JavaScript文件代码（ajax.js）： ```javascript function search() { var keyword = $("#keyword").val(); $.ajax({ url: "search.php", type: "POST", data: { keyword: keyword }, dataType: "json", success: function(result) { var html = ""; for (var i = 0; i < result.length; i++) { html += "<p>" + result[i].name + "：" + result[i].value + "</p>"; } $("#result").html(html); }, error: function(jqXHR, textStatus, errorThrown) { alert("查询失败：" + textStatus); } }); } ``` PHP文件代码（search.php）： ```php <?php // 连接数据库 $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "database"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("连接失败：" . $conn->connect_error); } // 获取查询条件 $keyword = $_POST["keyword"]; // 查询数据库 $sql = "SELECT * FROM data WHERE name LIKE '%$keyword%'"; $result = $conn->query($sql); // 将查询结果转换为JSON格式 $data = array(); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $data[] = array("name" => $row["name"], "value" => $row["value"]); } } echo json_encode($data); // 关闭数据库连接 $conn->close(); ?> ``` 在这个例子中，我们在页面中添加了一个输入框和一个查询按钮，用户输入查询条件后，点击查询按钮会触发JavaScript中的search()函数，该函数使用Ajax向search.php发送POST请求，将查询条件作为参数传递给PHP文件，PHP文件从数据库中查询符合条件的数据，并将查询结果转换为JSON格式返回给JavaScript，JavaScript解析JSON数据，并使用jQuery将查询结果插入到页面中指定的位置（id为result的div元素）实现局部刷新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值