Question

我正在使用java开发webapp，目前我需要将信息从表单发送到servlet，并将反馈从servlet发送回html页面。特别是当用户连接时，我想从servlet返回我数据库中所有用户的用户名和密码根据我的搜索，正确执行此操作的唯一方法是使用ajax，但我似乎无法使其工作。

来自html页面的片段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form" method="post" action="signIn">
        <input id="uname" name="uname" class="form-control" type="text">
        <input id="pass" name="pass" class="form-control" type="password">
        <input id="button1" class="btn btn-primary" type="submit" value="Sign In" />
    </form>
    <div id=result></div>

我的servlet（SingIn.java）目前看起来像这样

public class SignIn extends HttpServlet {
    private static final long serialVersionUID = 1L;


    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();

        String uname = request.getParameter("uname");
        String pass = request.getParameter("pass");

            Registration.setOnline(uname);
            try {
                // loading drivers for mysql
                Class.forName("com.mysql.jdbc.Driver");

                // creating connection with the database
                Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/ted", "root", "root");
                PreparedStatement ps = con.prepareStatement("select * from user");
                ResultSet rs = ps.executeQuery();
                out.println("<table>");
                while (rs.next()) {
                    uname = rs.getString(1);
                    pass = rs.getString(2);
                    out.println("<tr><th>" + uname +"</th><th>"+ pass + "</th></tr>");
                }
                out.println("</table>");

            } catch (Exception e) {
                e.printStackTrace();
            }


            RequestDispatcher res = request.getRequestDispatcher("html/index.html");
            res.include(request, response);

    }   
}

我的web.xml的一部分看起来像这样

<servlet-mapping>
  <servlet-name>SignIn</servlet-name>
  <url-pattern>/signIn</url-pattern>
</servlet-mapping>

因为我可以访问servlet并提交表单信息，但servlet的响应显示在页面顶部，而我需要它显示在“result”div中。我认为最好使用ajax和javascript，但我真的需要这方面的帮助

更新目前我在ajax中尝试这样的事情 $（document）.ready（function（）{

// Add an event that triggers when the submit
// button is pressed.
$("#button1").click(function() {

    // Get the text from the two inputs.
    var uname = $("#uname").val();
    var pass = $("#pass").val();



    // Ajax POST request.
    $.post('signIn',{"uname": uname, "pass": pass},
        function() { // on success
            $(#result).innerHTML=(not sure what);
        });

});

Answer 1

您的JavaScript调用应如下所示：

// Ajax POST request.
$.post('./signIn',
    {"uname": uname, "pass": pass},
    function( data ) { // on success
        $( "#result" ).html( data );
    });

或者更清楚：

// Ajax POST request.
$.ajax({
    type: 'POST',
    url: './signIn',
    data: {"uname": uname, "pass": pass},
    success: function( data ) {
        $( "#result" ).html( data );
    }
});

使用ajax提交表单并从servlet接收信息

1 个答案: