如何通过JavaScript将参数发布到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>
我承认我的回答部分是预感(因为是我很久以前写的),但是使用JSP时,通常应将form action命名为在其中配置的servlet的名称。 web.xml
web.xml
我认为您的 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">
对于JavaScript部分,如果您使用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赋值等方法。
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"); }