java - JSP:如何使用 onClick 或 onSubmit 事件在列表中添加值？

Question

大家好，我是 JSP 新手。我正在开展一个简单的 Activity ，我可以在列表中添加用户并显示它。用户列表的显示工作正常，但我在添加用户时遇到问题。

下面的代码显示用户列表:

<div id="userList">
            <h3>List of Users</h3>
            <ul>
                <% for (User user : data.getUsers())
                    {%>
                <li>
                    -<%= user.getFirstName()%> 
                    <%= user.getLastName()%> 
                    <br>Address: <%= user.getAddress()%>
                    <br>Age: <%= user.getAge()%>
                </li>
                <%}%>
            </ul>
</div>

下面的代码是添加用户的表单:

<form onsubmit="addToList()">
            <ul>
                <li>
                    <h3>Add User</h3>
                </li>
                <li>
                    First Name: <input id="firstNameField" type="Text" ></input>
                    Last Name: <input id="lastNameField" type="Text"></input>
                </li>
                <li>
                    Age: <input id="ageField" type="Text" ></input>
                    Address: <input id="addressField" type="Text"></input>
                </li>
                <li>
                    <button id="submit" onclick="addToList()">Submit</button>
                </li>
            </ul>
        </form>

这是处理该事件的代码:

<--Javascript-->
<script>
  function addToList()
    {
      <%data.addUsers(request.getParameter("firstNameField"), request.getParameter("lastNameField"), request.getParameter("ageField"), request.getParameter("addressField"));%>   <%-- data.adduser adds user to sample data --> 
    }
</script>

<--JQuery-->
<script>
    $(document).ready(function () {
        $("#submit").click(function () {
        <%
            data.addUsers(request.getParameter("firstNameHidden"), request.getParameter("lastNameHidden"), request.getParameter("ageHidden"), request.getParameter("addressHidden"));
        %>
        });
    });
</script>

当我运行它时，会添加一个带有空值的新用户，但是当我尝试再次提交时，它不会触发该事件。如果我做错了什么，有人可以启发我吗？谢谢。

Answer 1

您正在将 JSP scriptlet 代码与 Javascript 混合。您应该在 addToList 事件上从 Javascript 调用服务器端的 AJAX API。在服务器端，您可以在列表中添加用户，然后在成功时从 javascript 刷新页面，以便 JSP 加载新数据。