Ajax链接输出数据库
生活随笔
收集整理的這篇文章主要介紹了
Ajax链接输出数据库
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用Ajax鏈接數據庫并且獲取數據庫里的內容顯示在頁面
兩大步驟：
先看效果圖
沒有查詢并顯示數據之前效果
點擊查詢按鈕之后獲取數據庫內容顯示在頁面
下面進行程序的講解
一 數據庫的設計及實現
表的數據格式為
數據庫的設計及實現完畢
二 鏈接獲取顯示程序
先看一下程序列表結構
注意： 在寫程序之前一定要導入fastjson-1.2.62.jar和sqlijdbc.jar架包
下面開始程序的演示
1.util包里的DBUtil.java(鏈接數據庫)
package com.hnpi.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(){String url = "jdbc:sqlserver://localhost:1433;databaseName=Manager";String user = "sa";String pwd = "1";Connection conn = null;try {Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");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();}}}}2 . bean包里的User.java(User類)
package com.hnpi.bean;public class User {private int id;private String name;private String sex;private String pwd;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 getPwd() {return pwd;}public void setPwd(String pwd) {this.pwd = pwd;}public User() {super();// TODO Auto-generated constructor stub}public User(int id, String name, String sex, String pwd) {super();this.id = id;this.name = name;this.sex = sex;this.pwd = pwd;}}3 . servlet包里的AjaxServlet.java(調用數據庫鏈接并獲取內容)
package com.hnpi.servlet;import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; 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 com.alibaba.fastjson.JSON; import com.hnpi.bean.User; import com.hnpi.util.DBUtil;public class AjaxServlet 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.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();List<User> users = new ArrayList<User>();//鏈接數據庫Connection conn = DBUtil.getConn();String sql = "select * from users";PreparedStatement ps = null;ResultSet rs = null;try {ps = conn.prepareStatement(sql);rs = ps.executeQuery();while (rs.next()) {User user = new User();user.setId(rs.getInt(1));user.setName(rs.getString(2));user.setSex(rs.getString(3));user.setPwd(rs.getString(4));users.add(user);}} catch (Exception e) {e.printStackTrace();} finally {DBUtil.closeConn(conn, ps, rs);}String userStr = JSON.toJSONString(users);out.println(userStr);out.flush();out.close();}}4 . index.jsp(進行數據的顯示和樣式的設計)
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script src="jquery.js"></script><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><style>table,table{text-align: center;border: 2px solid red;border-collapse: collapse;}tr td{width: 150px;height: 20px;border-collapse: collapse;border: 2px solid red;}input{margin: 30px 260px;width: 100px;height: 30px;border-radius: 10px;border: 2px solid greenyellow;text-align: center;}</style><body><table><thead><tr><td>id</td><td>姓名</td><td>性別</td><td>密碼</td></tr></thead><tbody></tbody></table><input type="button" value="查詢信息"></body><script>$(function(){$(":button").on("click",function(){$.ajax({url:"test",type:"post",dataType:"json",success:function(data){console.log(data);$.each(data,function(i){var trstring="";trstring = "<tr><td>"+data[i].id+"</td><td>"+data[i].name+"</td><td>"+data[i].sex+"</td><td>"+data[i].pwd+"</td></tr>";$("tbody").append(trstring);});}});});});</script></html>相信上述程序已經能解決你的問題了，獲取更多內容關注我呦！！！
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的Ajax链接输出数据库的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 判断三角形是否是直角三角形
- 下一篇： mysql添加索引后查询先用索引吗_my