(jsp和servlet功能篇)jsp+servlet+jquery分页代码

哈哈 阅读:576 2021-04-01 10:24:56 评论:0

首先看运行效果图:

 

第一步:编写servlet 代码:

            

package com.rf.servlet; 
 
import java.io.IOException; 
import java.io.OutputStream; 
import java.sql.Connection; 
import java.sql.ResultSet; 
import java.sql.Statement; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
import com.rf.util.OracleUtil; 
 
 
 
public class DingdanServlet extends HttpServlet { 
 
	/** 
	 *  
	 */ 
	private static final long serialVersionUID = 1L; 
 
	@Override 
	public void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException { 
		// TODO Auto-generated method stub 
		//相关请求参数(订单状态、车辆类型)和可选参数(城市编号) 
//		String zhuangtai=request.getParameter("zhuangtai"); 
//		String leixing=request.getParameter("leixing"); 
//		String cityid=request.getParameter("cityid"); 
		 
		//数据库的工具类 
		 Connection connection; 
		 ResultSet resultset; 
		 Statement statement; 
		 //数据库相关查询语句(oracle 分页查询语句(动态 添加的参数:订单状态、车辆类型和城市编号)) 
		 String sql="select * from(select dingdanxx.liushuih,dingdanxx.chuangjiansj,dingdanxx.dangqianwz,dingdanxx.mudedi,dingdanxx.chengke_id,dingdanxx.jiajia,dingdanxx.yuyinwj,dingdanxx.dengdaisj,rownum rc from dingdanxx where dingdanxx.chelianglx='0' and dingdanxx.zhuangtai='2' and rownum<=20) where rc>10 "; 
		  
		 try{ 
			 connection=OracleUtil.getConn(); 
			 statement=connection.createStatement(); 
			 resultset=statement.executeQuery(sql); 
			 //拼接相关的json 格式数据 
			 StringBuffer json=new StringBuffer(); 
			 int i=0; 
			 json.append("["); 
			 while(resultset.next()){ 
				 if(i>0){ 
					 json.append(","); 
				 } 
				 json.append("{liushuih:'").append(resultset.getString(1)).append("'"); 
				 json.append(",chuangjiansj:'").append(resultset.getString(2)).append("'"); 
				 json.append(",dangqianwz:'").append(resultset.getString(3)).append("'"); 
				 json.append(",mudedi:'").append(resultset.getString(4)).append("'"); 
				 json.append(",chengke_id:'").append(resultset.getString(5)).append("'"); 
				 json.append(",jiajia:'").append(resultset.getString(6)).append("'"); 
				 json.append(",yuyinwj:'").append(resultset.getString(7)).append("'"); 
				 json.append(",dengdaisj:'").append(resultset.getString(8)).append("'"); 
				 json.append("}"); 
				 i++; 
			 } 
			 json.append("]"); 
			 //相关数据的输出 
				OutputStream out = response.getOutputStream(); 
				out.write(json.toString().getBytes("UTF-8"));	 
				out.close(); 
				//关闭数据库的连接操作 
				OracleUtil.closeCSR(connection, statement, resultset); 
			  
		 }catch(Exception e){ 
			 e.printStackTrace(); 
		 } 
	 
	} 
 
	@Override 
	public void doPost(HttpServletRequest req, HttpServletResponse resp) 
			throws ServletException, IOException { 
		// TODO Auto-generated method stub 
	      doGet(req,resp); 
	} 
	 
 
} 


 

第二步:编写Jsp页面代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" 
	pageEncoding="UTF-8"%> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     
    <title>订单信息分页</title>	 
	<!--加载jquery核心文件  --> 
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script> 
	<!--加载Jquery功能代码  --> 
	<script type="text/javascript" src="js/edc.js"></script> 
  </head> 
   
  <body>    
      <input type="Submit" value="Jsp+Jquery分页" align="MIDDLE" οnclick="bindDate();"/>  
 
       
      <table border="3" id="ygxxtable"> 
        <tr> 
          <th>订单编号</th> 
          <th>创建时间</th> 
          <th>当前位置</th> 
          <th>目的地</th> 
          <th>乘客编号</th> 
          <th>愿意加价</th> 
          <th>语音文件</th> 
          <th>等待时间</th> 
        </tr>         
    </table> 
    
     
    <div id="foot">       
        <div class="breakpage">3条记录 1/1 <a id="previous" href="#" οnclick="page()">上一页</a> <a id="next" href="#" οnclick="page()">下一页</a></div>     
    </div> 
   
        
  </body> 
</html> 


 

第三步:编写Jquery代码:

function bindDate(){ 
	alert("????"); 
	$.ajax({ 
		url: "dingdan", 
		type: 'post',	 
		success: function(data){ 
			if(data != null||data != "" ){ 
				//解析相关json 格式数据 
				var dataObj=eval("("+data+")"); 
				for(var i=0;i<dataObj.length;i++){ 
				var liushuih = dataObj[i].liushuih; 
				var chuangjiansj = dataObj[i].chuangjiansj; 
				var dangqianwz= dataObj[i].dangqianwz; 
				var mudedi = dataObj[i].mudedi; 
				var chengke_id = dataObj[i].chengke_id;				 
				var jiajia = dataObj[i].jiajia; 
				var yuyinwj = dataObj[i].yuyinwj; 
				var dengdaisj= dataObj[i].dengdaisj;			 
				//在table 添加一行新数据 
				var tr = "<tr><td >"+liushuih+"</td><td >"+chuangjiansj+"</td><td >"+dangqianwz+"</td><td >"+mudedi+"</td><td >"+chengke_id+"</td><td >"+jiajia+"</td><td >"+yuyinwj+"</td><td >"+dengdaisj+"</td></tr>" 
				$("#ygxxtable").append(tr); 
			} 
		}else{ 
			alert("没有数据"); 
		} 
			 
		}, 
		error: function(data) { 
			 
		} 
	}); 
}

标签:Servlet
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号