當前位置：
首頁 >
AJAX 信息查询管理
發布時間：2025/3/12
35
豆豆
生活随笔
收集整理的這篇文章主要介紹了
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
servlet包
AddServlet.java
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
路徑設置
web.xml
到此為止完整程序所有功能都已經實現。
掃一掃關注我的公眾號獲取更多資訊喲！！！
總結
以上是生活随笔為你收集整理的AJAX 信息查询管理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： openwrt dhcp 无法获取ip_
- 下一篇： java - 求a+aa+aaa+aa.