无法将其他数据添加到 jsp 表中，并且在使用 ajax 后弹出窗口也没有隐藏-解网

问：

我正在尝试更新 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/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
    crossorigin="anonymous">
<script
    src="https://cdn.jsdelivr.net/npm/[email protected]/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="[email protected]">
                        </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>

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

javascript jquery ajax jsp struts-1

0赞 Roman C 1/12/2023

该代码包含 Struts 1 标记。如果您不想发布清晰的 JavaScript 和 html 代码，那么怎么会有人回答您的问题呢？它是不可重现的，并且您没有提供自动执行的代码。题外话结束。

答：

-1赞 ni9khil 1/13/2023 #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/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
    crossorigin="anonymous">
<script
    src="https://cdn.jsdelivr.net/npm/[email protected]/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="[email protected]">
                        </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>

上一个：直接运行 servlet 提交帖子后 jQuery 脚本未执行

下一个：如何在ajax调用中通过jquery传递id来执行删除操作？

无法将其他数据添加到 jsp 表中，并且在使用 ajax 后弹出窗口也没有隐藏

Not able to add another data to the jsp table and the popup is also not hiding after using the ajax

评论