演示Ajax与数据库交互显示员工信息

freedom_zdh

于 2020-10-25 09:43:30 发布

阅读量114

点赞数

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="">
    <select name="customers" onchange="showCustomers(this.value)">
        <option value="">Select a customer</option>
        <option value="0">zhandonghong</option>
        <option value="1">vae</option>
        <option value="2">eason</option>
    </select>
</form>
<br>
<div id="txtDetail">Customer info will be listed here...
</div>
</body>

<script>


    function showCustomers(str) {
        if (str == "") {
            document.getElementById("txtDetail").innerHTML = "";
            return;
        }
        var xmlHttpObj;//global var
        if (window.XMLHttpRequest) {

            xmlHttpObj = new XMLHttpRequest();
        } else {

            xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlHttpObj.open("GET", "index.jsp?q=" + str, true);
        xmlHttpObj.send();

        xmlHttpObj.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {

                document.getElementById("txtDetail").innerHTML = this.responseText;

            }
        }
    }

</script>


</html>

jsp

<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %><%--
  Created by IntelliJ IDEA.
  User: psdxdgJ6DT
  Date: 2020/10/25
  Time: 7:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<style>

    table, th, tr, td {
        border: 1px solid black;
        border-collapse: collapse;

    }

    table {
        width: 100%;

        align-content: center;
    }

    .left {
        width: 30%;
        font-weight: bolder;

    }
</style>
<head>
    <title>$Title$</title>
</head>
<body>

<%
    String str = request.getParameter("q");

    int num = Integer.parseInt(str);

    Class.forName("com.mysql.cj.jdbc.Driver");

    String url = "jdbc:mysql://localhost:3306/customers?serverTimezone=UTC";
    String username = "root";
    String password = "admin";

    Connection connection = DriverManager.getConnection(url, username, password);


    Statement statement = connection.createStatement();

    ResultSet rs = statement.executeQuery("select  * from customerDetail where id=" + num);

    while (rs.next()) {
        out.print("<table>\n" +
                "  <tr><td class='left'>id</td><td>" + rs.getInt(1) + "</td></tr>\n" +
                "  <tr><td class='left'>name</td><td>" + rs.getString(2) + "</td></tr>\n" +
                "  <tr><td class='left'>companyName</td><td>" + rs.getString(3) + "</td></tr>\n" +
                "  <tr><td class='left'>address</td><td>" + rs.getString(4) + "</td></tr>\n" +
                "  <tr><td class='left'>postalCode</td><td>" + rs.getString(5) + "</td></tr>\n" +
                "  <tr><td class='left'>country</td><td>" + rs.getString(6) + "</td></tr>\n" +
                "</table>");
    }


%>


</body>
</html>

freedom_zdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
演示Ajax与数据库交互显示员工信息

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action=""> <select name="customers" onchange="showCustomers(this.value)">
复制链接

扫一扫