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 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