AJAX 信息查询管理

使用AJAX前后端分离技术实现对MySql数据库的数据查询删除和增加等操作。

功能分析：
1.登录
2.查询信息
3.增加信息
4.删除信息

效果演示

登陆页面
在这里插入图片描述
列表页面
在这里插入图片描述
点击查询信息
在这里插入图片描述
实现此功能要准备三部分分别是数据库，前端和后台。

一 ： MySql数据库

数据库内容:
1.连接数据库并查询数据库里的表
在这里插入图片描述
2.查询登录表和信息表的内容
在这里插入图片描述
到此位置我们的数据库部分就完成了，下面进行前端页面。

二 ： 前端展示

在进行前端页面开始之前请注意：
引入jquery.js架包
前端目录
在这里插入图片描述

前端页面展示

add.html内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery.js"></script>
</head>
<body>
姓名:<input type="text" name="name" id="name" /><br />
性别:<input type="text" name="sex" id="sex" /><br>
住址:<input type="text" name="address" id="address" /><br />
<input type="button" value="添加" id="login" />
</body>
<script>$(function(){$(":button").on("click",function(){var name = $("#name").val();var sex = $("#sex").val();var address = $("#address").val();$.ajax({url:"http://localhost:8080/MySqlAjax/add",type:"post",data:{name:name,sex:sex,address:address},dataType:"text",success:function(data){alert("添加成功！")window.location.href="show.html";},error : function() {alert('添加失败');}});});});
</script>
</html>

del.html内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery.js"></script>
</head>
<body>
ID:<input type="text" name="id" id="zhi">
<input type="button" value="删除" id="delete" />
</body>
<script>$(function(){$(":button").on("click",function(){var id = $("#zhi").val();$.ajax({url:"http://localhost:8080/MySqlAjax/del",type:"post",data:{id:id},dataType:"text",success:function(data){alert("删除成功！")window.location.href="show.html";},error : function() {alert('删除失败');}});});});
</script>
</html>

login.html内容

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script src="js/jquery.js"></script>
</head>
<style>#login{width: 100px;height: 30px;margin: 20px 50px;border: 2px solid greenyellow;border-radius: 10px;}
</style>
<body>
账号:<input type="text" name="name" id="name" /><br>
密码:<input type="password" name="pwd" id="pwd" /><br />
<input type="button" value="登陆" id="login" />
</body>
<script>$(function(){$(":button").on("click",function(){var name = $("#name").val();var pwd = $("#pwd").val();$.ajax({url:"http://localhost:8080/MySqlAjax/login",type:"post",data:{name:name,pwd:pwd},dataType:"text",success:function(data){if(data == "ok"){window.location.href="show.html";}else{window.location.href="login.html";}}});});});
</script>
</html>

show.html内容

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><script src="js/jquery.js"></script>
</head>
<body>
<div><a>查询信息</a><a href="add.html">添加信息</a><a href="del.html">删除信息</a>
</div><table><thead><tr><td>ID</td><td>姓名</td><td>性别</td><td>住址</td></tr></thead><tbody id="tbody"></tbody>
</table>
</body>
<script>$(function(){$("a").on("click",function(){$.ajax({url:"http://localhost:8080/MySqlAjax/select",type:"post",data:{},dataType:"json",success:function(data){$("#tbody").empty(); //删除匹配的元素集合中所有的子节点（就是不重复执行）var trStr = "";for (var i = 0; i < data.length; i++) {trStr += "<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].sex + "</td><td>" + data[i].address + "</td></tr>"}$("#tbody").show().append(trStr);},error : function() {alert('请求失败');}});});});
</script>
</html>

到这里我们已经完成三分之二了，下面进行后台程序。

三 ： 后台程序

在我们的后台程序开始之前请注意：
引入mysql-connector-java-5.1.39-bin.jar架包和fastjson-1.2.62.jar架包
目录结构
在这里插入图片描述

程序演示

bena包
Student.java

package com.zsh.bean;public class Student {private int id;private String name;private String sex;private String address;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getSex() {return sex;}public void setSex(String sex) {this.sex = sex;}public String getAddress() {return address;}public void setAddress(String address) {this.address = address;}public Student() {super();// TODO Auto-generated constructor stub}public Student(int id, String name, String sex, String address) {super();this.id = id;this.name = name;this.sex = sex;this.address = address;}}

servlet包
AddServlet.java

package com.zsh.servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.zsh.util.DBUtil;public class AddServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");String name = request.getParameter("name");String sex = request.getParameter("sex");String address = request.getParameter("address");response.setContentType("text/html");//解决跨域问题response.setHeader("Access-Control-Allow-Origin", "*");PrintWriter out = response.getWriter();int count = 0;Connection conn = DBUtil.getConn();PreparedStatement ps = null;String sql = "insert into student(name,sex,address) values(?,?,?)";try {ps = conn.prepareStatement(sql);ps.setString(1, name);ps.setString(2, sex);ps.setString(3, address);count = ps.executeUpdate();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{DBUtil.closeConn(conn, ps, null);}if(count>1){out.print("success");}else{out.print("error");}out.flush();out.close();}}

DeleteServlet.java

package com.zsh.servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.zsh.util.DBUtil;public class DeleteServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");String id = request.getParameter("id");response.setContentType("text/html");//解决跨域问题response.setHeader("Access-Control-Allow-Origin", "*");PrintWriter out = response.getWriter();int count = 0;Connection conn = DBUtil.getConn();PreparedStatement ps = null;String sql = "delete from student where id = ?";try {ps = conn.prepareStatement(sql);ps.setInt(1, Integer.parseInt(id));count = ps.executeUpdate();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{DBUtil.closeConn(conn, ps, null);}if(count>1){out.print("success");}else{out.print("error");}out.flush();out.close();}}

LoginServlet.java

package com.zsh.servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.zsh.util.DBUtil;public class LoginServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");String name = request.getParameter("name");String pwd = request.getParameter("pwd");response.setContentType("text/html");//解决跨域问题response.setHeader("Access-Control-Allow-Origin", "*");PrintWriter out = response.getWriter();System.out.println(request.getRemoteAddr()+"/"+name+":"+pwd);boolean flag = false;Connection conn = DBUtil.getConn();PreparedStatement ps = null;ResultSet rs = null;String sql = "select * from login where name = ? and pwd = ?";try {ps = conn.prepareStatement(sql);ps.setString(1, name);ps.setString(2, pwd);rs = ps.executeQuery();if(rs.next()){flag = true;}else{flag = false;}} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{DBUtil.closeConn(conn, ps, rs);}if(flag){out.print("ok");}else{out.print("error");}out.flush();out.close();}}

SelectServlet.java

package com.zsh.servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;import com.alibaba.fastjson.JSON;
import com.zsh.bean.Student;
import com.zsh.util.DBUtil;public class SelectServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");response.setContentType("text/html");//解决跨域问题response.setHeader("Access-Control-Allow-Origin", "*");PrintWriter out = response.getWriter();Connection conn = DBUtil.getConn();PreparedStatement ps = null;ResultSet rs = null;String sql = "select * from student";List<Student> students = new ArrayList<Student>();try {ps = conn.prepareStatement(sql);rs = ps.executeQuery();while(rs.next()){Student student = new Student();student.setId(rs.getInt(1));student.setName(rs.getString(2));student.setSex(rs.getString(3));student.setAddress(rs.getString(4));students.add(student);}String json = JSON.toJSONString(students);out.print(json);} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{DBUtil.closeConn(conn, ps, rs);}out.flush();out.close();}}

util包
DBUtil.java

package com.zsh.util;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;public class DBUtil {public static Connection getConn(){Connection conn = null;String url = "jdbc:mysql://localhost:3306/school";String user = "root";String pwd = "111";try {Class.forName("com.mysql.jdbc.Driver");conn = DriverManager.getConnection(url, user, pwd);} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (ClassNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();}return conn;}public static void closeConn(Connection conn, PreparedStatement ps, ResultSet rs){if(conn!=null){try {conn.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}if(ps!=null){try {ps.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}if(rs!=null){try {rs.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}}}

路径设置
web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><display-name></display-name><servlet><description>This is the description of my J2EE component</description><display-name>This is the display name of my J2EE component</display-name><servlet-name>LoginServlet</servlet-name><servlet-class>com.zsh.servlet.LoginServlet</servlet-class></servlet><servlet><description>This is the description of my J2EE component</description><display-name>This is the display name of my J2EE component</display-name><servlet-name>SelectServlet</servlet-name><servlet-class>com.zsh.servlet.SelectServlet</servlet-class></servlet><servlet><description>This is the description of my J2EE component</description><display-name>This is the display name of my J2EE component</display-name><servlet-name>AddServlet</servlet-name><servlet-class>com.zsh.servlet.AddServlet</servlet-class></servlet><servlet><description>This is the description of my J2EE component</description><display-name>This is the display name of my J2EE component</display-name><servlet-name>DeleteServlet</servlet-name><servlet-class>com.zsh.servlet.DeleteServlet</servlet-class></servlet><servlet-mapping><servlet-name>LoginServlet</servlet-name><url-pattern>/login</url-pattern></servlet-mapping><servlet-mapping><servlet-name>SelectServlet</servlet-name><url-pattern>/select</url-pattern></servlet-mapping><servlet-mapping><servlet-name>AddServlet</servlet-name><url-pattern>/add</url-pattern></servlet-mapping><servlet-mapping><servlet-name>DeleteServlet</servlet-name><url-pattern>/del</url-pattern></servlet-mapping>	<welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list>
</web-app>

到此为止完整程序所有功能都已经实现。

扫一扫关注我的公众号获取更多资讯哟！！！
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/565709.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【youcans 的 OpenCV 例程 200 篇】118. 形态学操作之底帽运算

【youcans 的 OpenCV 例程 200 篇】118. 形态学操作之底帽运算

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】118. 形态学操作之底帽运算 形态学的基本思想是利用结构元素测量或提取输入图像中的形状或特征&…
阅读更多...
SPSS操作（五）：主成分分析

SPSS操作（五）：主成分分析

为综合评价我国2006年省级地区服务业发展水平&#xff0c;现构建我国省级地区服务业发展水平综合评价指标体系&#xff0c;具体如下&#xff1a;铁路运输业职工人数(人)、城市公共交通业职工人数(人)、邮政业职工人数(人)、电信和其他信息传输服务业职工人数(人)、客运量(万人)…
阅读更多...
SpringBoot创建简单的hello world

SpringBoot创建简单的hello world

用目前流行的SpringBoot框架创建一个简单的hello world. 效果演示 控制台输出Spring 在游览器输入地址出现如下所示 代码演示 在代码正式开始之前我们先看一下目录结构吧 我们只需要关心src/main/java包里的内容和pom.xml里面的内容 主启动程序 Application.java内容 p…
阅读更多...
【youcans 的 OpenCV 例程 200 篇】119. 图像的形态学梯度

【youcans 的 OpenCV 例程 200 篇】119. 图像的形态学梯度

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】119. 图像的形态学梯度 形态学的基本思想是利用结构元素测量或提取输入图像中的形状或特征&…
阅读更多...
爬取虎扑步行街论坛数据保存到MySQL、MongoDB

爬取虎扑步行街论坛数据保存到MySQL、MongoDB

本文内容围绕获取虎扑步行街论坛上所有帖子的数据开展的&#xff0c;爬取的内容包括帖子名称、帖子链接、作者、作者链接、创建时间、回复数、浏览数、最后回复用户和最后回复时间&#xff0c;将爬取的数据分别保存在MongoDB和MySQL里 网页地址&#xff1a; https://bbs.hupu.c…
阅读更多...
MyEclipse导入项目后 js文件报错

MyEclipse导入项目后 js文件报错

当我们把项目导入MyEclipse的时候会发现导入的项目报错&#xff0c;点开一看是js文件报错了&#xff0c;那么我们应该如何处理导入MyEclipse之后js文件报错呢&#xff1f;&#xff1f;&#xff1f; 首先&#xff0c;我们要保证我们导入的代码是正确的。 解决js文件报错我总结…
阅读更多...
【youcans 的 OpenCV 例程 200 篇】120. 击中-击不中变换

【youcans 的 OpenCV 例程 200 篇】120. 击中-击不中变换

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】120. 击中-击不中变换 形态学的基本思想是利用结构元素测量或提取输入图像中的形状或特征&#…
阅读更多...
gets函数会自动加空字符吗_Python高手都知道的内置函数，你不知道就low了

gets函数会自动加空字符吗_Python高手都知道的内置函数，你不知道就low了

xinxin 菜鸟学Python 阅读本文大概需要5分钟python内置了一些非常巧妙而且强大的内置函数&#xff0c;对初学者来说&#xff0c;一般不怎么用到&#xff0c;我也是用了一段时间python之后才发现&#xff0c;哇还有这么好的函数&#xff0c;这个函数都是经典的而且经过严格测试的…
阅读更多...
Tableau2019版本安装步骤

Tableau2019版本安装步骤

因为需要&#xff0c;所以遍地寻找tableau安装包&#xff0c;然后找到2021等版本&#xff0c;安装发现都不能显示表和图&#xff0c;所以继续寻找&#xff0c;然后发现了2019版安装包&#xff0c;安装发现可以正常使用&#xff0c;以下是安装包的下载地址&#xff1a; 链接&…
阅读更多...
HTML全屏背景图

HTML全屏背景图

当我们在写前端页面的时候为了页面的美观我们通常会为页面设置图片背景&#xff0c;那么我们如何来设置全屏的背景图呢&#xff1f;&#xff1f;&#xff1f; 设置全屏背景图需要三个属性 background-image: url(img/untitled.png);background-repeat: no-repeat;background-s…
阅读更多...
【youcans 的 OpenCV 例程200篇】121. 击中-击不中用于特征识别

【youcans 的 OpenCV 例程200篇】121. 击中-击不中用于特征识别

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】121. 击中-击不中用于特征识别 击中-击不中是形态检测的基本工具&#xff0c;可以实现对象的细…
阅读更多...
存储过程双层循环_别出心裁，为锂金属负极贴上“双层保护膜”！

存储过程双层循环_别出心裁，为锂金属负极贴上“双层保护膜”！

第一作者&#xff1a;Yang Zhao、Maedeh Amirmaleki通讯作者&#xff1a;TobinFilleter、蔡梅、孙学良通讯单位&#xff1a;加拿大多伦多大学、通用汽车研发中心、加拿大西安大略大学研究亮点&#xff1a;1.提出了锂金属负极“双层保护膜”的概念。2.通过ALD/MLD精确控制双层保…
阅读更多...
Anaconda安装Wordcloud库失败的解决办法

Anaconda安装Wordcloud库失败的解决办法

主要安装出现了如下问题&#xff1a; 当时我也不知道这是出了什么问题&#xff0c;后来我就试试另一个办法安装Wordcloud&#xff0c;因此记录一下&#xff1a; 1、查看自己的Anaconda使用的python版本号 方法&#xff1a;进入Anaconda Prompt&#xff0c;输入python -V 2…
阅读更多...
拼图游戏

拼图游戏

使用JS制作了一款拼图游戏供大家参考。 原理分析&#xff1a; 1.鼠标的点击和松开事件 2.显示原图作为参考 3.方块的移动替换 4.是否完成拼图的判断 5.完成之后会弹窗提示 效果演示 代码展示 <!DOCTYPE html> <html><head><meta charset"UTF-8&qu…
阅读更多...
【youcans 的 OpenCV 例程200篇】122. 形态算法之边界提取

【youcans 的 OpenCV 例程200篇】122. 形态算法之边界提取

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】122. 形态算法之边界提取 3. 形态学算法 形态学处理的主要应用是提取图像中用来表示和描述形状…
阅读更多...
人机协作机器人发展趋势_发那科童梁：机器人化不是时髦！有效的人机协作投资回报率更高...

人机协作机器人发展趋势_发那科童梁：机器人化不是时髦！有效的人机协作投资回报率更高...

编者按&#xff1a;此文是根据上海发那科机器人有限公司技术部部长童梁于2019年5月在浙江宁波余姚举行的第六届中国机器人峰会上的《物联网浪潮下的智能制造》报告录音整理摘编部分而成&#xff0c;题目为编者所加。随着“中国制造2025”的不断推进&#xff0c;越来越多制造业企…
阅读更多...
做一个关于我和她微信聊天记录的爱心词云图

做一个关于我和她微信聊天记录的爱心词云图

前言&#xff1a; 因为最近接触到了词云图&#xff0c;所以就想做一个关于和女朋友聊天的词云图,但是现在很少使用QQ了&#xff0c;所以就不得不使用微信导出聊天记录。于是我坐在电脑面前查阅资料查了一天&#xff0c;但是在走到快导出微信聊天记录的时候&#xff0c;还是被…
阅读更多...
【youcans 的 OpenCV 例程200篇】123. 形态算法之孔洞填充

【youcans 的 OpenCV 例程200篇】123. 形态算法之孔洞填充

欢迎关注 『youcans 的 OpenCV 例程 200 篇』 系列&#xff0c;持续更新中 欢迎关注 『youcans 的 OpenCV学习课』 系列&#xff0c;持续更新中 【youcans 的 OpenCV 例程 200 篇】123. 形态算法之孔洞填充 3. 形态学算法 形态学处理的主要应用是提取图像中用来表示和描述形状…
阅读更多...
弹框提示

弹框提示

jquery弹框提示框的实现。 原理分析 1.点击按钮出现弹框 2.设置弹框标题和内容 3.设置取消和确定两个按钮 4.点击确定继续执行 5.点击取消返回此页面 效果演示 原始样式 点击之后 点击确认按钮 代码演示 在开始我们的程序之前注意&#xff1a; 引入Jquery.js架包 <…
阅读更多...
el-tooltip位置不灵活_美团研究院：超五成生活服务业商户有灵活用工需求

el-tooltip位置不灵活_美团研究院：超五成生活服务业商户有灵活用工需求

更多精彩&#xff0c;请点击上方蓝字关注我们&#xff01;美团研究院于 9 月 15 日发布《生活服务业新就业形态和灵活就业的发展特征和发展趋势》报告&#xff0c;报告指出我国目前灵活用工岗位类型众多&#xff0c;是从业者的重要收入来源&#xff0c;从业者通过灵活就业拓宽了…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023