小项目：使用ajax异步get请求获取数据库信息并输出到浏览器页面，并使用JSON改进代码，实现前后端分离

姓蔡小朋友

已于 2022-09-03 17:59:01 修改

阅读量760

点赞数

分类专栏： AJAX 文章标签： ajax 数据库 servlet

于 2022-09-03 16:44:12 首次发布

本文链接：https://blog.csdn.net/m0_53881899/article/details/126678006

版权

AJAX 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

功能：点击按钮，后端数据库信息输出到前端浏览器页面上。


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>获取数据库信息</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function (){
            document.getElementById("btn").onclick = function (){
                //1.创建核心对象
                var xhr = new XMLHttpRequest();
                //2.注册回调函数
                xhr.onreadystatechange = function(){
                    if (this.readyState == 4){
                        if(this.status == 200){
                            document.getElementById("tr1").innerHTML = this.responseText;
                        }else{
                            alert(this.status);
                        }
                    }
                }
                //3.开启通道
                xhr.open("get","/xmm/servlet3",true);
                //4.发送请求
                xhr.send();
            }
        }

    </script>
    <input type="button" id="btn" value="点击"/><br/>
    <table>
        <tr>
            <th>deptno</th>
            <th>dname</th>
            <th>loc</th>
        </tr>
        <tbody id="tr1">


        </tbody>
    </table>
</body>
</html>

package mypackage;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ResourceBundle;

@WebServlet("/servlet3")
public class Servlet03 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        ResourceBundle rb = ResourceBundle.getBundle("jdbc");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        StringBuilder sb = new StringBuilder();
        Connection con = null;
        PreparedStatement pre = null;
        ResultSet res = null;
        try {
            Class.forName(rb.getString("driver"));
            con = DriverManager.getConnection(rb.getString("url"),rb.getString("username"),rb.getString("password"));
            pre = con.prepareStatement("select * from dept");
            res = pre.executeQuery();
            while(res.next()){
                int deptno = res.getInt("deptno");
                String dname = res.getString("dname");
                String loc = res.getString("loc");
                sb.append("<tr>");
                sb.append("<td>"+deptno+"</td>");
                sb.append("<td>"+dname+"</td>");
                sb.append("<td>"+loc+"</td>");
                sb.append("</tr>");
            }
            out.print(sb);
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            try {
                res.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
            try {
                pre.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
            try {
                con.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
    }
}

该程序存在的问题：后端servlet中写有HTML代码，前后端未分离。
试想能否用jsp将后端servlet中的代码分离出来：
不可以！如果使用jsp，就等于是又新建了一个html页面，使用转发或重定向是可以跳转到这个jsp并展示后端数据库信息，但是URL发生了变化，而我们使用ajax的目的就是为了不让URL发生变化并获得我们需要的功能。
解决方法：使用json对象作为数据传送规范


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>获取数据库信息</title>
</head>
<body>
<script type="text/javascript">
  window.onload = function (){
    document.getElementById("btn").onclick = function (){
      //1.创建核心对象
      var xhr = new XMLHttpRequest();
      //2.注册回调函数
      xhr.onreadystatechange = function(){
        if (this.readyState == 4){
          if(this.status == 200){
            var t = JSON.parse(xhr.responseText);
            var html = "";
            for (var i = 0; i < t.length; i++) {
              var s = t[i];
              html+=("<tr>");
              html+=("<td>"+s.deptno+"</td>");
              html+=("<td>"+s.dname+"</td>");
              html+=("<td>"+s.loc+"</td>");
              html+=("</tr>");
            }
            document.getElementById("tr1").innerHTML=html;
          }else{
            alert(this.status);
          }
        }
      }
      //3.开启通道
      xhr.open("get","/xmm/servlet4",true);
      //4.发送请求
      xhr.send();
    }
  }

</script>
<input type="button" id="btn" value="点击"/><br/>
<table>
  <tr>
    <th>deptno</th>
    <th>dname</th>
    <th>loc</th>
  </tr>
  <tbody id="tr1">


  </tbody>
</table>
</body>
</html>

package mypackage;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ResourceBundle;

@WebServlet("/servlet4")
public class Servlet04 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        ResourceBundle rb = ResourceBundle.getBundle("jdbc");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        StringBuilder sb = new StringBuilder();
        Connection con = null;
        PreparedStatement pre = null;
        ResultSet res = null;
        try {
            Class.forName(rb.getString("driver"));
            con = DriverManager.getConnection(rb.getString("url"),rb.getString("username"),rb.getString("password"));
            pre = con.prepareStatement("select * from dept");
            res = pre.executeQuery();
            sb.append("[");
            while(res.next()){
                int deptno = res.getInt("deptno");
                String dname = res.getString("dname");
                String loc = res.getString("loc");
                String jsonString = "{\"deptno\":"+deptno+", \"dname\":\""+dname+"\", \"loc\":\""+loc+"\" }";
                sb.append(jsonString+",");
            }
            sb.deleteCharAt(sb.length()-1);
            sb.append("]");
            /*
            拼成的实际上是一个json对象的数组：
            [
                {
                "deptno":01
                "dname":"指挥部"
                "loc":"北京"
                },
                {
                "deptno":02
                "dname":"执行部"
                "loc":"上海"
                }
            ]
             */
            out.print(sb);
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            try {
                res.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
            try {
                pre.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
            try {
                con.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
    }
}