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

最新推荐文章于 2020-12-07 23:42:44 发布

在奋斗的大道

最新推荐文章于 2020-12-07 23:42:44 发布

阅读量1.4k

点赞数

分类专栏： jsp和Servlet(功能篇)

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/9765083

版权

jsp和Servlet(功能篇) 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

首先看运行效果图：

第一步：编写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) {
			
		}
	});
}