login.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Test</title> <link rel="stylesheet" href=""> </head> <body> <form id="form1"> username: <input type="text" name="username" id="username" /> password: <input type="password" name="password" id="password" /> <input type="button" value="登录" id="send"/> </form> <script src="jquery.js"></script> <script> $("#send").click(function () { $.ajax({ type: "post", url: "../ajax/Test", //data: {username: $("#username").val(), password: $("#password").val()}, data: $("#form1").serialize(), success: function (data,textStatus) { if (data=="success") { alert("登录成功"); } else { alert("登录失败"); } } }); }); </script> </body> </html>
用ajax提交表单，提交按钮不能写成submit而应该写在button，否则是表单提交，而不是ajax效果
提交表单，form的 method, action都不用写了
loginCheck.java
package servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class Test extends HttpServlet{ @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter out = resp.getWriter(); String username = req.getParameter("username"); String password = req.getParameter("password"); if (username.equals(password)) { out.print("success"); } else { out.print("fail"); } } }
原生ajax
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Test</title> <link rel="stylesheet" href=""> </head> <body> <form id="form1"> username: <input type="text" name="username" id="username" /> password: <input type="password" name="password" id="password" /> <input type="button" value="登录" id="send"/> </form> <script> var btn = document.getElementById("send"); btn.onclick = function () { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.responseText == "success") { alert("成功"); } if (xhr.responseText == "fail") { alert("失败"); } } }; xhr.open("POST","../ajax/Test",true); var form = document.getElementById("form1"); xhr.send(new FormData(form)); }; </script> </body> </html>
一：当使用GET请求的时候，如果我们需要将字符串追加到URL末尾，那么我们必须要对其请求的名称和值进行encodeURIComponent()编码，然后才可以放在URL后面，而且所有的名-值都必须有和好（&）分隔。如
var btn = document.getElementById("btn"); btn.onclick = function () { var xhr = new XMLHttpRequest(); var url = "2.jsp"; url = addURIParam(url, "name", "value"); xhr.open("get", url , true); xhr.send(null); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { document.getElementById("test").innerHTML = xhr.responseText; } }; }; function addURIParam (url, name, value) { url += (url.indexOf("?") == -1 ? "?" : "&"); url += encodeURIComponent(name) + "=" + encodeURIComponent(value); return url; }
二：当使用POST请求的时候，我们需要模仿表单的样式将数据提交给服务器，否则默认情况下，服务器并不会将POST请求和表单的请求视为一致，为了让服务器能够获取到数据并对其进行处理，所有我们需要将Content-Type的头部信息设为application/x-www-form-urlencoded。具体如何用呢？如下：
xhr.open('POST',"index.jsp",true);
xhr.setRequestHeader('Content-Type',"application/x-www-form-urlencoded");
xhr.send("username="+username+"&password="+password);
参考：http://blog.csdn.net/ag18976736136/article/details/51702995