Как извлечь и заполнить значения из MySQL в HTML, выберите параметры динамически в JSP и AJAX для двух вариантов выбора - PullRequest
Новая
       2

Как извлечь и заполнить значения из MySQL в HTML, выберите параметры динамически в JSP и AJAX для двух вариантов выбора

0 голосов
/ 21 мая 2019

Я столкнулся с проблемой при извлечении данных из базы данных MySQL и заполнении их опцией выбора html с использованием ajax.Значение, которое отображается правильно для первого поля выбора, но для второго поля выбора, оно отображает содержимое первого текстового поля, а также результат второго текстового поля.Пожалуйста, помогите мне найти проблему в приведенном ниже коде.Я не использую какие-либо рамки.Это простой проект 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 голосов
/ 21 мая 2019

При вызове ajax вам нужно получить 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 введите код вашей базы данных, как показано ниже: 

<%@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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...