Question

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

以下代码显示用户列表：

<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将加载新数据。

Answer 2

我终于找到了解决这个问题的方法。我尝试使用Servlet来处理表单中的请求并且它可以正常工作！

＆＃13;

 <form action="AddUser"> <-- AddUser is a servlet-->
            First Name: <input name="firstNameField" type="text">
            Last Name: <input name="lastNameField" type="text">

            Age: <input name="ageField" type="text">
            Address: <input name="addressField" type="text">
            <input type="submit" value="submit"> 
</form>

＆＃13;

在AddUser servlet中，我显示所有用户，包括新添加的用户。

＆＃13;

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        response.setContentType("text/html;charset=UTF-8");
        try (PrintWriter out = response.getWriter())
        {
            // reading the user input 
            out.append("<ul>");
            for(User user: data.getUsers())
            {
                out.append("<li>" +user.getFirstName()+" "+user.getLastName()
                        +"<br>Address:"+user.getAddress()
                        +"<br>Age:"+user.getAge()+"</li>");
            }
            out.append("</ul>");
        }
    }

＆＃13;

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

2 个答案: