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

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

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

望加指点。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现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、付费专栏及课程。

余额充值