如何使用Jquery和Ajax從數據庫中的jsp中創建動態依賴下拉菜單

Question

我如何選擇一個系，它只會向我顯示該系中的系。 我的數據庫名稱是getDbase，在這里我有三個表：1.具有兩行的transfaculties表（faculty_id和facultyname 2.具有兩行的transdepartments表（department_id和departmentname）3.具有三行的transfacdept表（transfacdept_id，faculty_id和department_id）這是我編寫的代碼這是我的第一個jsp頁面代碼，名為Faculty.jsp

<%@page import="com.sua.db.DbManipulation"%>
<%@page import="java.sql.*" contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="com.sua.db.DbConnection"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <link href="layout.css" rel="stylesheet">
    <link href="forms.css" rel="stylesheet">
        <script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
         <script type="text/javascript">
            jQuery(document).ready(function()
            {

                    jQuery('.faculty').change(function()
                    {
                            var idsss=$(this).val();
                            var dataString = 'fac_id='+ idsss;

                            jQuery.ajax
                            ({
                                    type: "POST",
                                    url: "Department.jsp",
                                    data: dataString,
                                    cache: false,
                                    success: function(html)
                                    {
                                        jQuery('.dept').html(html); // result should be the class name of 'dept' dropdown (representing the Department)
                                    } 
                            });

                    });


            });

        </script>

</head>
<body>
    <!-- ####################################################################################################### -->  
    <div id="container">
      <div class="wrapper">
        <div id="register">

                        <tr>
                        <td>Dropdown</td>
                            <td>
                            <select name="faculty" class="faculty" style="background-color: #ffffa0">
                                <option selected="selected">--Select Faculty--</option>
                                <%  //HttpSession session = request.getSession();

                                    String returnFacName = "SELECT `transfacdept`.`transfacdept_id`, `transfacdept`.`faculty_id`, "
                                        + "`transfacdept`.`department_id`, `transfaculties`.faculty_id, "
                                        + "`transfaculties`.facultyname "
                                        + "FROM `transfacdept`,`transfaculties` "
                                        + "WHERE `transfacdept`.`transfacdept_id` = `transfaculties`.faculty_id";
                                    Connection con = new DbConnection().getConnection();
                                    PreparedStatement st = con.prepareStatement(returnFacName);
                                    //ResultSet rs = ps.executeQuery();
                                    ResultSet rs1 = st.executeQuery(); 
                                    while(rs1.next())
                                    { 
                                        %>
                                            <option value="<%=rs1.getInt("faculty_id")%>">
                                                <%=rs1.getString("facultyname")%>
                                            </option>
                                        <%
                                    }
                                %>
                            </select>
                            </td>
                            </tr>

                            <tr>
                            <td>Dropdown 2:</td>
                            <td>
                                <select name="dept" class="dept" style="background-color: #ffffa0">
                                    <option selected="selected">--Select Dept--</option>

                                </select>
                            </td>
                            </tr>


            </div>


                                </div>
                                <br class="clear" />
                        </div>
                        </div>

</body>
</html>

這是我的第二個jsp頁面代碼，稱為Department.jsp

<head>

        <script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>

</head>
<body>
    <!-- ####################################################################################################### -->  
    <div id="container">
      <div class="wrapper">
        <div id="register">


                        <td>Dropdown2</td>
                            <td>
                             <%     Connection con = new DbConnection().getConnection();
                                                    //Statement st = con.createStatement( );
                                    String $select = request.getParameter("fac_id");
                                                        String returnDeptName = "SELECT `transfacdept`.`transfacdept_id`, `transfacdept`.`faculty_id`, "
                                                                + "`transfacdept`.`department_id`, `transfaculties`.facultyname, "
                                                                + "`transdepartments`.departmentname "
                                                                + "FROM `transfacdept`, `transfaculties`, `transdepartments` "
                                                                + "WHERE `transfaculties`.faculty_id = '"+$select+"' "
                                                                + "AND `transfacdept`.`department_id` = `transdepartments`.department_id "
                                                                + "AND `transfacdept`.`faculty_id` = `transfaculties`.`faculty_id` ";

                                                        PreparedStatement st2 = con.prepareStatement(returnDeptName); 
                                                        ResultSet rs2=st2.executeQuery(); 
                                                        while(rs2.next())
                                                        { 
                                                            %>
                                                                <option value="<%=rs2.getInt("department_id")%>">
                                                                    <%=rs2.getString("departmentname")%>
                                                                </option>
                                                            <%
                                                        }
                                                    %>
                            </td>
                            </tr>



            </div>


                                </div>
                                <br class="clear" />
                        </div>
                        </div>
<!-- ####################################################################################################### -->  

    </body>
</html>

知道我哪里出錯了嗎？ 它只給我教師，而沒有從Jquery調用部門

Answer 1

歡迎來到。 首先，正如評論中提到的那樣，您做事的方式是完全錯誤的。

我的建議是寫一些AJAX-JAVA教程，甚至在此之前，如果您還沒有完成如何使用servlet的話，請先學習它，然后再學習AJAX。

這是一個包含詳細答案的鏈接，您可以扔掉。 stackoverflow示例

希望這可以幫助。

如何使用Jquery和Ajax從數據庫中的jsp中創建動態依賴下拉菜單

問題描述

1 個解決方案

解決方案1
0 2017-08-04 10:48:47

如何使用Jquery和Ajax從數據庫中的jsp中創建動態依賴下拉菜單

問題描述

1 個解決方案

解決方案1 0 2017-08-04 10:48:47

解決方案1
0 2017-08-04 10:48:47