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

debugcn 发表于 Dev

系统管理员

我在从 MySQL 数据库中获取数据并使用 ajax 将其填充到 html 选择选项时遇到问题。它为第一个选择框正确显示的值，但对于第二个选择框，它显示第一个文本框的内容以及第二个文本框的结果。请帮我在下面的代码中找到问题。我没有使用任何框架。其简单的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>

我得到的输出是

输出我运行此代码时得到的内容

斯瓦蒂

在您的 ajax 调用中，您需要获取select-box（表名），然后您需要将其分配给 some <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把你的数据库代码如下：

<%@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>');
     %>

在您的 index.jsp 中，只需添加一个<div id="table"></div>，这里就会有响应somepage.jsp，也不要忘记从您的 index.jsp 页面中删除额外的代码。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。