JavaScript向Java Servlet发送HTTP POST请求

Question

JavaScript向Java Servlet发送HTTP POST请求

5

如何使用 JavaScript 将参数 POST 给 Java Servlet？

这是我的 HTML 代码，它可以正常工作：

<div id="loginPanel">
<form action="/login" method="POST" class="form">
    <label>Login:</label>
    <input type="text" name="login" id="login">
    <label>Password:</label>
    <input type="text" name="password" id="password">
    <div id="loginLower">
        <input type="checkbox"><label memory="memory">Remember me</label>
        <input type="submit" value="Login">
    </div>
</form>
</div>

现在，我想要对密码进行哈希处理，并使用类似下面这样的代码将其POST到/login hashPassword：

<form onsubmit="post()">
    <label>Login:</label>
    <input type="text" name="login" id="login">
    <label>Password:</label>
    <input type="text" name="password" id="password">
    <div id="loginLower">
        <input type="checkbox"><label memory="memory">Remember me</label>
        <input type="submit" value="Login">
    </div>
</form>

<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>

<script>
function post(){
 var passhash = CryptoJS.MD5(document.getElementById("password").value);
//post to /login login and passhash
}
</script>

我曾尝试使用AJAX和JQuery，但这些解决方案在/login方面存在问题，因为它们在浏览器中调用localhost:8080/?login，而我想调用Java Servlet：web.xml。

<servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>pl./*...*/.LogoutServlet</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/login/*</url-pattern>
</servlet-mapping>

- DivinaProportio

这个问题的问题在于你编辑后修改了它，现在变成了完全不同的两个问题。第一部分要求在提交表单之前使用 passwordHash，而第二部分则使用普通的输入值。第一个需要调整 JavaScript，而另一个则不需要。分开提问，这太疯狂了。 - Mauno Vähä

好的，你是正确的！;-) - DivinaProportio

2个回答

0

你尝试过使用jQuery POST方法指定web.xml作为URL吗？你还需要防止默认的提交事件。

https://api.jquery.com/jQuery.post/

function post(e){
    e.preventDefault();

    $.post( "/web.xml" , you_data, function(data, textStatus, jqXHR){

    });
}

- Stefano Ortisi

我从未见过 JSP 中有这样的东西，尽管六年前我曾经编写过它.. 你测试过这个是否可行吗？ - Mauno Vähä

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mauno Vähä · Accepted Answer

我承认我的回答在某种程度上是凭直觉的（因为我很久以前写过它），但使用JSP时，你通常应该将表单操作命名为在web.xml中配置的servlet的名称。

我认为你的web.xml应该是这样的：

<servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>pl./*...*/.LogoutServlet</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/login</url-pattern>
</servlet-mapping>

并将您的HTML更改为以下内容：

<form action="LoginServlet" method="POST" class="form" id="loginForm">

如果您使用jQuery提交表单，则可以修改要提交的参数并省略密码（因为如果要将其作为散列值进行提交，则不需要密码）。请参阅下面的代码以了解用法：

JavaScript（使用jQuery）：

// Attach a submit handler to the form
$("#loginForm").submit(function( event ) {

    // Stop form from submitting normally
    event.preventDefault();

    // Get some values from elements on the page:
    var $form = $( this );

    // We want to customize what we post, therefore we format our data
    var data = "login="+ $('#login').val() +"&passwordHash=" + CryptoJS.MD5($('#password').val());

    // For debugging purposes... see your console:
    // Prints out for example: login=myLoginName&passwordHash=a011a78a0c8d9e4f0038a5032d7668ab
    console.log(data);

    // The actual from POST method
    $.ajax({
        type: $form.attr('method'),
        url:  $form.attr('action'),
        data: data,
        success: function (data) {
            console.log("Hey, we got reply form java side, with following data: ");
            console.log(data);

            // redirecting example..
            if(data === "SUCCESS") {

               window.location.replace("http://stackoverflow.com");

            }

        }
    });

});

最后，在Java端，您需要一个doPost()方法来捕获login和passwordHash等值。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    String login = request.getParameter("login");
    String password = request.getParameter("passwordHash");

   //
   // Do what ever you want with login and passwordHash here...
   //

   // Because we are using ajax we need to respond to it stating whether we can redirect or not to new location, see lines below

   // Content type of the response - You could also return application/json for example (which would be better in this case)
   response.setContentType("text/plain"); // Using text/plain for example
   response.setCharacterEncoding("UTF-8");

   // Change this as you like - it can also be url or anything else you want...
   response.getWriter().write("SUCCESS");

}

阅读更多关于使用JSON响应的内容：jsp中的JSON响应