Servlet学习二---查询数据库数据,并在前端页面展示

本文主要是介绍Servlet学习二---查询数据库数据,并在前端页面展示,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

要想彻底了解这篇文章,请看前期内容
jquary和json学习
jdbc的概述和基本使用
JDBC实现增删改查

一、创建数据库和student表如下

在这里插入图片描述
在这里插入图片描述

二、创建servlet项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、创建jdbc工具类,链接数据库

①:创建工具类

在这里插入图片描述

②: 导入jar包

在这里插入图片描述

③编写jdbc链接代码,并测试链接

在这里插入图片描述

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;public class MySqlUtil {public static void main(String[] args) {String sql = "select * from student;";search(sql);}public static void search(String sql) {try {Class.forName("com.mysql.jdbc.Driver"); // 1.加载驱动//2.建立连接Connection connection = (Connection) DriverManager.getConnection("jdbc:mysql://localhost:3306/school?useUnicode=true&characterEncoding=utf-8", "root", "2020");Statement statement = (Statement) connection.createStatement();//4.执行sql语句ResultSet re = (ResultSet) statement.executeQuery(sql);//5.处理结果while (re.next()) {String id = re.getString("id");String name = re.getString("name");String sex = re.getString("sex");String age = re.getString("age");String sno = re.getString("sno");String class_name = re.getString("class_name");System.out.println(id +" "+ name +" " + sex+" " + age + " " + sno+" " + class_name);}//6.释放资源if(re!=null) {re.close();}if(statement !=null) {statement.close();}if (connection !=null) {connection.close();}} catch (Exception e) {// TODO Auto-generated catch blockSystem.out.println("找不到驱动类,加载失败");e.printStackTrace();} }
}

④测试通过

在这里插入图片描述

四、创建Servlet,并获取数据

在这里插入图片描述
在这里插入图片描述
测试结果
在这里插入图片描述

五、编写方法,拼接json格式

在这里插入图片描述

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;public class MySqlUtil {public static void main(String[] args) {String sql = "select * from student;";String[] colums = {"id","name","sex","age","sno","class_name"};String data = search(sql, colums);System.out.println(data);}/*** 查询* @param sql     sql语句* @param colums  数据库字段数组*/public static String search(String sql,String[] colums) {ArrayList<String[]>  result = new ArrayList<String[]>();try {Class.forName("com.mysql.jdbc.Driver"); // 1.加载驱动//2.建立连接Connection connection = (Connection) DriverManager.getConnection("jdbc:mysql://localhost:3306/school", "root", "2020");Statement statement = (Statement) connection.createStatement();//4.执行sql语句ResultSet re = (ResultSet) statement.executeQuery(sql);//5.处理结果while(re.next()){String[] dataRow = new String[colums.length];for( int i = 0; i < dataRow.length; i++ ) {dataRow[i] = re.getString( colums[i] );}result.add(dataRow);}//6.释放资源if(re!=null) {re.close();}if(statement !=null) {statement.close();}if (connection !=null) {connection.close();}} catch (Exception e) {// TODO Auto-generated catch blockSystem.out.println("找不到驱动类,加载失败");e.printStackTrace();} return listToJson(result,colums);}/*** json拼接方法* @param list* @param colums* @return*/public static String listToJson( ArrayList<String[]> list,String[] colums) {String jsonStr = "{\"code\":0,\"msg\":\"success\",\"data\":[";for(int i = 0; i < list.size(); i++) {String arr = "{";for( int j = 0; j < list.get(0).length; j++) {if( list.get(i)[j] == null || "NULL".equals(list.get(i)[j])) {arr += "\"" + colums[j] + "\":\"\"";}else {arr += "\"" + colums[j] + "\""+":" ;arr +=  "\"" + list.get(i)[j].replace("\"","\\\"") + "\"";}if( j < list.get(0).length - 1 ) {arr += ",";}}arr += "}";if( i < list.size() - 1 ) {arr += ",";}jsonStr += arr;}jsonStr += "]}";return jsonStr;}
}

测试
在这里插入图片描述

六、重写编写servlet,并给前端返回json数据

在这里插入图片描述

		//设置返回值的格式response.setCharacterEncoding("utf-8");response.setContentType("application/json; charset=utf-8");//编写查询的sql语句String sql = "select * from student;";//获取数据String[] colums = {"id","name","sex","age","sno","class_name"};String data = MySqlUtil.search(sql, colums);response.getWriter().append(data);

编写前端index页面,ajax访问!
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">  </script> 
</head>
<body onload="getData()"></body>
<script>function getData(){$.ajax({url: "/StuServlet/ShowServlet",   // 地址type:"get",success: function (value){console.log(value);}  });}</script>
</html>

测试结果,浏览器f12查看
在这里插入图片描述

七、前端页面数据展示

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">  </script> 
</head>
<body onload="getData()"><!-- 展示数据库的数据 --><div  id="fade" ></div>
</body>
<script>function getData(){$.ajax({url: "/StuServlet/ShowServlet",   // 地址type:"get",success: function (value){console.log(value);ViewList(value.data)}  });}function ViewList(data){var html = '<table border="1">';for(var i = 0; i < data.length; i++){html += '<tr>';html += '<td>' + data[i].id + '</td>';html += '<td>' + data[i].name + '</td>';html += '<td>' + data[i].sex + '</td>';html += '<td>' + data[i].age + '</td>';html += '<td>' + data[i].sno + '</td>';html += '<td>' + data[i].class_name + '</td>';html += '</tr>';}html += '</table>';$("#fade").empty().append(html);}
</script>
</html>

页面展示
在这里插入图片描述

这篇关于Servlet学习二---查询数据库数据,并在前端页面展示的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/735999

相关文章

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多

Linux下利用select实现串口数据读取过程

《Linux下利用select实现串口数据读取过程》文章介绍Linux中使用select、poll或epoll实现串口数据读取,通过I/O多路复用机制在数据到达时触发读取,避免持续轮询,示例代码展示设... 目录示例代码(使用select实现)代码解释总结在 linux 系统里,我们可以借助 select、

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,:本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”:浏览器到底缓存了谁?三、设计思路:把“发版”做成“自愈”四、代码

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢?... 目录1. 早期的解决方案2. 交叉观察者:IntersectionObserver2.1 Inter

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,:本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,:本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1:直接下载(推荐)方案 2:手动构造

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫(Navigation Guards)本质上就是 在路