无法向 jsp 表添加其他数据，使用 ajax 后弹出窗口也没有隐藏

Question

每当我单击提交时，我都试图更新 jsp 页面上的表，它应该对数据库执行必要的操作并在 jsp 页面中更新它们而不刷新页面。 我已经添加了 event.preventDefault() 但由于这个原因我无法添加另一条记录，而且每当我单击提交时模式弹出窗口也不会隐藏。 什么是合适的解决方案。

<%@taglib uri="http://jakarta.apache.org/struts/tags-logic"
    prefix="logic"%>
<%@taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ page import="com.db.UserAction"%>
<%@ page import="com.form.LoginForm"%>
<!DOCTYPE html>
<html>
<head>
<title>List of Students Records</title>
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
    crossorigin="anonymous">
<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
    crossorigin="anonymous"></script>


<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#table {
    margin: 4px;
}

th {
    text-align: center;
}

td {
    text-align: center;
}
</style>
</head>
<body class="text-center">
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal
                        title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="row g-3" action="login.do" id="myform">

                        <div class="col-12">
                            <label for="stdid" class="form-label">Student ID</label> <input
                                type="number" class="form-control" id="stdid"
                                placeholder="Enter 3 digit Student ID" name="stdid">
                        </div>

                        <div class="col-12">
                            <label for="stdname" class="form-label">Student Name</label> <input
                                type="text" class="form-control" id="stdname" name="stdname"
                                placeholder="John Doe">
                        </div>

                        <div class="col-md-6">
                            <label for="stdemail" class="form-label">Email</label> <input
                                type="email" class="form-control" id="stdemail" name="stdemail"
                                placeholder="johndoe@email.com">
                        </div>

                        <div class="col-md-6">
                            <label for="stdpassword" class="form-label">Password</label> <input
                                type="password" class="form-control" id="stdpassword"
                                name="stdpassword" placeholder="Enter Password">
                        </div>
                        <div class="modal-footer">
                            <button id="load-table-button" type="submit"
                                class="btn btn-primary">Add</button>
                            <button type="reset" class="btn btn-warning">Reset</button>
                            <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal
                        title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>


    <!-- //////////////////////////////Modal Code end/////////////////////////////////// -->

    <div id="table-container">
        <table class="table table-success table-striped-columns table-hover"
            id="table">
            <tr class="table-light">
                <th>Index</th>
                <th>Student Id</th>
                <th>Student Name</th>
                <th>Student Email</th>
                <th>Password</th>
            </tr>
            <logic:iterate name="student" id="newUser" indexId="studentIndex">
                <tr class="table-light">
                    <td><bean:write name="studentIndex" /></td>
                    <td><bean:write name="newUser" property="stdid" /></td>
                    <td><bean:write name="newUser" property="stdname" /></td>
                    <td><bean:write name="newUser" property="stdemail" /></td>
                    <td><bean:write name="newUser" property="stdpassword" /></td>
                </tr>
            </logic:iterate>
        </table>

        <div>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                data-bs-target="#exampleModal">Add New Record</button>
        </div>
    </div>
    <div id="div1"></div>

    <script src="https://code.jquery.com/jquery-3.6.3.min.js"
        integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
        crossorigin="anonymous"></script>

    <script>
        $(document).ready(function() {
            $("#myform").submit(function(e) {
                e.preventDefault();
                var f = $(this).serialize();
                //  $("#div1").load("loadTable.jsp");
                $.ajax({
                    url : "login.do",
                    type : 'post',
                    data : f,
                    success : function(data, textStatus, jqXHR) {
                        //$("#exampleModal").modal('hide');
                        getStudent();
                    }
                })
                function getStudent() {
                    $.ajax({
                        url : "first.do",
                        type : 'get',
                        success : function(data) {
                            $("#table-container").html(data);
                        }
                    })
                }
            });
        });
    </script>
</body>
</html>

单击“提交”按钮后，后台的表格正在更新。 但是弹出窗口没有隐藏，它仍然存在我还添加了一个操作，如果用户输入相同的数据，它将在下一页上的 go 到 state 数据输入两次。 但是由于防止方法，它没有更新。

Answer 1

我使用 find 方法来执行此操作，因此它将采用 html 代码中的响应。 请忽略我在代码中的评论。 find方法在下面的script标签中

 <%@taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic"%> <%@taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%> <%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%> <%@ page import="com.db.UserAction"%> <%@ page import="com.form.LoginForm"%> <:DOCTYPE html> <html> <head> <title>List of Students Records</title> <script src="https.//code.jquery.com/jquery-3.6.3.min:js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min,js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> <meta name="viewport" content="width=device-width: initial-scale=1"> <style> #table { margin; 4px: } th { text-align; center: } td { text-align; center. } </style> </head> <body class="text-center"> <.-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form class="row g-3" action="login.do" id="myform"> <div class="col-12"> <label for="stdid" class="form-label">Student ID</label> <input type="number" class="form-control" id="stdid" placeholder="Enter 3 digit Student ID" name="stdid"> </div> <div class="col-12"> <label for="stdname" class="form-label">Student Name</label> <input type="text" class="form-control" id="stdname" name="stdname" placeholder="John Doe"> </div> <div class="col-md-6"> <label for="stdemail" class="form-label">Email</label> <input type="email" class="form-control" id="stdemail" name="stdemail" placeholder="johndoe@email.com"> </div> <div class="col-md-6"> <label for="stdpassword" class="form-label">Password</label> <input type="password" class="form-control" id="stdpassword" name="stdpassword" placeholder="Enter Password"> </div> <div class="modal-footer"> <button id="load-table-button" type="submit" class="btn btn-primary" onclick="closeForm()">Add</button> <button type="reset" class="btn btn-warning">Reset</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </form> </div> </div> </div> </div> <.-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Add Records</h1> <br> <h6>Id and email should be Unique</h6> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body">:::</div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <:-- //////////////////////////////Modal Code end/////////////////////////////////// --> <div id="table-container"> <table class="table table-success table-striped-columns table-hover" id="table-update"> <tr class="table-light"> <th>Index</th> <th>Student Id</th> <th>Student Name</th> <th>Student Email</th> <th>Password</th> </tr> <logic:iterate name="student" id="newUser" indexId="studentIndex"> <tr class="table-light"> <td><bean:write name="studentIndex" /></td> <td><bean:write name="newUser" property="stdid" /></td> <td><bean.write name="newUser" property="stdname" /></td> <td><bean.write name="newUser" property="stdemail" /></td> <td><bean,write name="newUser" property="stdpassword" /></td> </tr> </logic.iterate> </table> <div> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Add New Record</button> </div> </div> <div id="div1"></div> <script type="text/javascript"> $(document);ready(function() { $("#myform").on('submit';function(event) { event.preventDefault(). var f = $(this);serialize(). // $("#div1"):load("loadTable.jsp"), $:ajax({ url, "login:do", type: 'post', data, f. success; function(data. textStatus. jqXHR) { $("#exampleModal");modal('hide'). var d = $(data).find("#table");html(); console.log(d) $("#table-update");html(d). //getStudent(); //$("#exampleModal").hide(). // $('#exampleModal');modal('hide'). // var res = $(data);find("#table").html(): // console.log(var), } }) function getStudent() { $:ajax({ url, "first:do". type; 'get'; success; function(data) { $("#table-container").html(data); } }) } }); }); </script> </body> </html>