Postgresql数据库javaweb教程详细完整版（二）

最新推荐文章于 2024-09-08 08:48:12 发布

我不胖只是懒

最新推荐文章于 2024-09-08 08:48:12 发布

阅读量817

点赞数 1

分类专栏： javaWeb 文章标签： jsp ajax javaweb 增删改查 excel导出

本文链接：https://blog.csdn.net/dz18360538869/article/details/81290183

版权

本教程详述了如何在JavaWeb应用中使用PostgreSQL数据库，通过AJAX实现前后台数据交互。内容包括查询所有数据、条件查询和Excel导出功能的实现。此外，还介绍了添加操作以及删除操作（需管理员权限）。源代码示例展示了通用方法，只需调整特定参数即可应用于不同场景。

摘要由CSDN通过智能技术生成

上一章完成了后台的一些操作，本章将实现前台页面的展示和ajax前后台数据的交互。

都是通用版本，不同的仪器参数只要更换接收的数据和url及地址就行。

1.先实现查询：先看一下查询结果（删除操作在添加后展示）

A.所有数据：

B,条件查询（一个仪器编号只有一条数据）

C.excel导出功能：

具体源代码如下：

新建qryyqcsLsy.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>量水堰仪器参数</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/style.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/page.css" />
<link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/resources/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/page.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/page.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/laydate.js"></script>
<script type="text/javascript">
//这个ajax负责接收前台下拉列表里面的数据获取，里面的数据为yqcs的所有编号
$.ajax({
    url:'${pageContext.request.contextPath}/lsyServlet?method=qryAllSelect',
    type:'POST', //GET
    async:true,    //或false,是否异步
    data:{
    	select : $("#select").val(),//一定要写，要不然无法获取到
    },
    timeout:5000,    //超时时间
    dataType:'text',    //返回的数据格式：json/xml/html/script/jsonp/text
    success:function(data,textStatus,jqXHR){
    	var dataObj = eval('(' + data + ')');//text转json
//动态添加数据
    	var textHtml ="<option value=''>全部</option>";
    	for(var i=0;i<dataObj.length;i++){
    		textHtml +="<option value = "+dataObj[i].name+" >"+dataObj[i].name+"</option>"
    	}
    	document.getElementById("select").innerHTML=textHtml;
    	
    	
    }, 
    error:function(xhr,textStatus){
    	//alert(222)
        console.log('错误')
    }
})
//按钮提交执行
//分页操作：根据查询结果分页，先按照名称获取，再分页；都是常规操作，更换接收到的数据即可
//对于接收到的时间参数，一般会是时间戳格式，所以通过构建函数强转；
function tijiao() {
	$.ajax({
	    url:'${pageContext.request.contextPath}/lsyServlet?method=qryLsyByName',
	    type:'POST', //GET
	    async:true,    //或false,是否异步
	    timeout:5000,    //超时时间
	    dataType:'text',    //返回的数据格式：json/xml/html/script/jsonp/text
	    data : {		
	    	select:$("#select").val(),
		},
	    success:function(data,textStatus,jqXHR){
	    	var dataObj=eval('('+data+')');
	       	$("#page").initPage(dataObj.length,1,pagination.tabs);  
	       	pagination.tabs(1);
	    }, 
	    error:function(xhr,textStatus){
	        console.log('错误')
	    }
	})
	var pagination = {
		"tabs" : function(param) {
			if (typeof (param) == "undefined") {
				param = 1;
			}
			var url = "${pageContext.request.contextPath}";
			url += '/lsyServlet?method=qryLsyByFy';
			$.ajax({
				url : url,
				type : 'POST', //GET
				async : true, //或false,是否异步
				data : {
					pageNo:param,
					select : $("#select").val(),	
				},
				timeout:5000,    //超时时间
				dataType : 'text', //返回的数据格式：json/xml/html/script/jsonp/text
				success : function(data, textStatus, jqXHR) {
					//时间戳转为时间
					function timestampToTime(timestamp) {
					    var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
					    Y = date.getFullYear() + '-';
					    M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
					    D = date.getDate() + ' ';
					    return Y