如何在jsp和ajax中为两个选择选项框动态地从mysql取值和填充值到HTML选择选项

时间：2019-05-21 08:13:44

标签： java mysql ajax jsp

我在从MySQL数据库中获取数据并使用ajax将其填充到html select选项时遇到问题。对于第一个选择框，它正确显示的值，但对于第二个选择框，它正在显示第一个文本框的内容以及第二个文本框的结果。请帮助我在下面的代码中找到问题。我没有使用任何框架。它是简单的jsp，ajax和mysql dynamicweb项目。

尝试了许多可能的解决方案

这是我的代码

<%@page import="java.sql.ResultSetMetaData"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Generic CRUD Home</title>

<script>
    var request;
    function sendSchema() {
        var schemaOption = document.getElementById('schemaName');
        var selectedSchema = schemaOption.options[schemaOption.selectedIndex].value;
        var url = "index.jsp?schema=" + selectedSchema;

        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }

        try {
            request.onreadystatechange = getTableList;
            request.open("GET", url, true);
            request.send();
        } catch (e) {
            alert("Unable to connect to server");
        }
    }

    function getTableList() {
        if (request.readyState == 4) {
            var tablesList = request.responseText;
            document.getElementById('tableName').innerHTML = tablesList;
            console.log('tablesList :' + tablesList);
            console.log('tablesListXML :' + tablesListXML);
            var tablesListXML = request.responseXML.getElementsById('tableName');
            console.log('tablesListXML :' + tablesListXML);
        }
    }
    //  var xmlhttp;
    //  function sendTable() {
    //      var tableOption = document.getElementById('tableName');
    //      var selectedTable = tableOption.options[tableOption.selectedIndex].value;
    //      var url = "index.jsp?table=" + selectedTable;

    //      if (window.XMLHttpRequest) {
    //          xmlhttp = new XMLHttpRequest();
    //      } else if (window.ActiveXObject) {
    //          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    //      }

    //      try {
    //          xmlhttp.onreadystatechange = getTableContents;
    //          xmlhttp.open("GET", url, true);
    //          xmlhttp.send();
    //      } catch (e) {
    //          alert("Unable to connect to server");
    //      }
    //  }

    //  function getTableContents() {
    //      if (xmlhttp.readyState == 4) {
    //          var tableContents = xmlhttp.responseXML;
    //          document.getElementById('tableContent').innerHTML = tableContents;
    //      }
    //  }
</script>
</head>
<body>
    <h1>Generic CRUD Home</h1>

    <%
        Class.forName("com.mysql.jdbc.Driver");
        Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "root");
        Statement stmtSchemaList = conn.createStatement();
        Statement stmtTableLit = null;
        ResultSet rsSchemaList = stmtSchemaList.executeQuery("show databases");
        ResultSet rsTableList = null;
        ResultSetMetaData rsmd = null;
    %>
    Database/Schema Name :
    <select id="schemaName" onchange="sendSchema()">
        <option value="null" selected="selected">Select
            Database/Schema</option>
        <%
            while (rsSchemaList.next()) {
                out.println(
                        "<option value=" + rsSchemaList.getString(1) + ">" + rsSchemaList.getString(1) + "</option>");
            }
            rsSchemaList.close();
            if (request.getParameter("schema") != null) {
                String selectedSchema = request.getParameter("schema");
                stmtTableLit = conn.createStatement();
                stmtTableLit.execute("use " + selectedSchema);
                PreparedStatement pstmt = conn.prepareStatement("show tables");
                rsTableList = pstmt.executeQuery();

            }
        %>
    </select> Table :
    <select id="tableName" onchange="sendTable()">
        <option value="null" selected="selected">Choose the Table</option>
        <%
            if (rsTableList != null) {
                while (rsTableList.next()) {
                    out.println(
                            "<option value=" + rsTableList.getString(1) + ">" + rsTableList.getString(1) + "</option>");
                }
                rsTableList.close();
            }
        %>
    </select>

    <div id="tableContent">
        <table border="0">
        </table>
    </div>
</body>
</html>

我得到的输出是

输出运行此代码时得到的信息

enter image description here

1 个答案:

答案 0 :(得分：0)

在ajax调用中，您需要获取$*IN（表名），然后需要将其分配给某些select-box。在代码中进行以下更改以使其起作用：

<div>：

Javascript

现在在您的function sendSchema() { var schemaOption = document.getElementById('schemaName'); var selectedSchema = schemaOption.options[schemaOption.selectedIndex].value; var url = "somepage.jsp?schema=" + selectedSchema; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if (window.ActiveXObject) { request = new ActiveXObject("Microsoft.XMLHTTP"); } request.onreadystatechange= function() { if(this.readyState === 4 && this.status === 200) { document.getElementById("table").innerHTML =this.responseText;// getting response and assign to div with id->table } }; request.open("GET",url,true); request.send(); } 中，将数据库代码如下：

somepage.jsp

在index.jsp中，只需添加一个<%@page import="java.sql.PreparedStatement"%> <%@page import="java.sql.ResultSet"%> <%@page import="java.sql.Statement"%> <%@page import="java.sql.DriverManager"%> <%@page import="java.sql.Connection"%> <% Statement stmtTableLit = null; ResultSet rsTableList = null; Class.forName("com.mysql.jdbc.Driver"); Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "root"); if (request.getParameter("schema") != null) { String selectedSchema = request.getParameter("schema");//getting data stmtTableLit = conn.createStatement(); stmtTableLit.execute("use " + selectedSchema); PreparedStatement pstmt = conn.prepareStatement("show tables"); rsTableList = pstmt.executeQuery(); } //whatever will be there in out.println() will be sent back as response to your index.jsp page out.println('<select id="tableName" onchange="sendTable()"> <option value="null" selected="selected">Choose the Table</option>'); if (rsTableList != null) { while (rsTableList.next()) { out.println( "<option value=" + rsTableList.getString(1) + ">" + rsTableList.getString(1) + "</option>"); } rsTableList.close(); } out.println('</select>'); %> ，此处的响应将来自<div id="table"></div>，也请不要忘记从index.jsp页面中删除其他代码。

相关问题
最新问题