如何使用 jquery 和 ajax 将数据从 jsp 发送到 servlet [重复]答案

【问题标题】：How to send data from jsp to servlet using jquery and ajax [duplicate]如何使用 jquery 和 ajax 将数据从 jsp 发送到 servlet [重复]
【发布时间】：2019-12-06 07:25:13
【问题描述】：

我是 jquery 和 ajax 的新手。我想检查给定的用户名是否存在于我的数据库中，如果它可用我想通过传递一条名为用户名的消息来发出警报。我正在尝试应用 jquery 的 blur 方法，因此在提交表单之前，我可以获得有关该用户名的状态。请帮我解决这个问题。

This is my JSP page

<body>

    <div class="container registration">
        <fieldset class="border p-2">
            <legend class="w-auto">Registration Form</legend>
            <form action="registration" method="post" id="registrationForm"
                onsubmit="return validation();">
                <div class="row" style="padding-bottom: 20px">
                    <div class="col">
                        <input type="text" class="form-control" name="firstName"
                            placeholder="First name" id="fname"> <span id="firstname"
                            class="text-danger font-weight-bold"></span>
                    </div>
                    <div class="col">
                        <input type="text" class="form-control" name="lastName"
                            placeholder="Last name" id="lname"> <span id="lastname"
                            class="text-danger font-weight-bold"></span>
                    </div>
                </div>

                <div class="row" style="padding-bottom: 20px">
                    <div class="col">
                        <input type="text" class="form-control" name="userName"
                            placeholder="UserName" id="uname"> <span id="username"
                            class="text-danger font-weight-thin"></span>
                    </div>
                    <div id="ajaxGetUserServletResponse"></div>
                </div>
                <!-- below jquery things triggered on onblur event and checks the username availability in the database -->
                <script type="text/javascript">
                    $(document).ready(function() {
                        alert("js is working");
                        $('#uname').blur(function() {
                            alert("blur is working")
                            $.ajax({
                                    type : 'post',
                                    url : 'registration',
                                    data : {
                                                uname : $('#uname').val()
                                            },
                                            success : function(responseText) {
                                                $('#ajaxGetUserServletResponse').text(responseText);
                                            }
                                    });
                            });
                    }); 
                </script>

This is my servlet

@WebServlet("/registration")
public class RegistrationServlet extends HttpServlet {
    Registration userDetails = Utility.getRegistration();
    // RegistrationService registrationService = Utility.getRegistrationService();
    UserDetailsService userDetailsService = Utility.getUserService();
    JSONArray array = null;
    JSONObject jsonObject;
    private static final long serialVersionUID = 1L;

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String fName = req.getParameter("firstName");
        String lName = req.getParameter("lastName");
        String uName = req.getParameter("userName");
        String email = req.getParameter("email");
        String contactNumber = req.getParameter("contactNumber");
        String password = req.getParameter("password");

        userDetails.setFirstName(fName);
        userDetails.setLastName(lName);
        userDetails.setUserName(uName);
        userDetails.setEmail(email);
        userDetails.setMobile(contactNumber);
        userDetails.setPassword(password);

        try {
            jsonObject = UserDetailsRepository.getOneUserDetails(uName);
            if (jsonObject != null) {
                String msg = "User is already exist";
                resp.setContentType("text/plain");
                resp.getWriter().write(msg);
            //  throw new UserAlreadyExistException("User is already exist");
            } else {
                boolean result = userDetailsService.addUser(userDetails);
                if (result) {
                    req.setAttribute("insert", "Data is added into the table successfully!!!");
                    resp.sendRedirect("index.jsp");
                } else {
                    req.setAttribute("message", "Something went wrong!!!");
                    resp.sendRedirect("error.jsp");
                }
            }
        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        }
    }

【问题讨论】：

究竟解决什么？你有点忽略了给我们一个实际的问题描述......请阅读How to Ask，然后相应地编辑你的问题。

标签： jquery ajax jsp servlets

【解决方案1】：

我了解到您想检查用户是否已经存在。你做得几乎是对的。

 $.ajax({
                                type : 'post',
                                url : 'registration',
                                data : {
                                            uname : $('#uname').val()
                                        },
                                        success : function(responseText) {
                                            $('#ajaxGetUserServletResponse').text(responseText);
                                        }
                                });
                        });

您在 ajax 中使用名为 uname 的参数发送数据，但您的 servlet 并没有得到该名称的任何信息。你应该这样做：

String uName= req.getParameter("uname");

并与 uName 一起检查您想要什么。我不确定这是否像你想要的那样工作，因为你的表单也在触发 servlet。您应该根据名称来区分呼叫。当您调用 ajax 时，所有其他参数都将为空，除了您要发送的 uname （如果用户输入了某些内容。也许也先检查一下？）。但是在发送表单时，来自 ajax 的 uname 将为空。

可能是这样的：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
    if(request.getParameter("userName") != null) {
        formCall(request,response);
    }

    if(request.getParameter("uname") != null) {
        ajaxCall(request,response);
    }
}

private void ajaxCall(HttpServletRequest request, HttpServletResponse response) {
    System.out.println("Ajax call " + request.getParameter("uname"));

}

private void formCall(HttpServletRequest request, HttpServletResponse response) {
    System.out.println("Form call " + request.getParameter("userName"));

}

.blur 中的 ajax 调用跳转到一个方法，表单提交到另一个。

错误行为：如果用户加载页面，点击文本字段，然后点击按钮，这将同时触发 .blur 和提交。也许你也不想这样。

【讨论】：

感谢您的建议，它帮助我解决了这个问题。
所以请把答案标记出来 :) 很高兴我能提供帮助。