简单易懂：Ajax入门实例详解（登录功能）

本文介绍: Aja x（Async hr on ous Jav aScri p t and XML）是一种基于We b 技术的编程实现方式，它使用Jav aScri p t和XML来实现异步的数据交互。Jav aScri p t 负责发起请求和处理响应，而XML则负责将数据与页面分离。Aja x 能够在不刷新整个页面的情况下更新页面内容，提高了页面的响应速度和用户体验。

结合一个简单的登录页面来理解：

<body>
<div>
    <span>账号:</span>
    <input type="text"  name="username">
    <br>
    <span>密码:</span>
    <input type="password"  name="password">
    <br>
    <button >登录</button>
</div>
</body>

<script>
    $("button").click(function () {
        var Username=$("input[name='username']").val();
        var Password=$("input[name='password']").val();
        $.ajax(
            {
                url:"LoginAjax",
                method:"post",
                data:
                    {
                        username:Username,
                        password:Password
                    },
                dataType:"json",
                success:function (Result)
                {
                    
                        console.log(“登录成功！”);
                   
                }
            });
    });
</script>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <style>
        div{
            position: relative;
            left: 40%;
            top: 30%;
            float: left;
        }
    </style>
</head>
<body>
<div>
    <span>账号:</span>
    <input type="text"  name="username">
    <br>
    <span>密码:</span>
    <input type="password"  name="password">
    <br>
    <button >登录</button>
</div>
<script>
    $("button").click(function () {
        var Username=$("input[name='username']").val();
        var Password=$("input[name='password']").val();
        $.ajax(
            {
                url:"LoginAjax",
                method:"post",
                data:
                    {
                        username:Username,
                        password:Password
                    },
                dataType:"json",
                success:function (Result)
                {
                    if (Result.result)
                    {
                        location.href="index.jsp";
                        console.log(Result.message);
                    }
                    else console.log(Result.message);
                }
            });
    });
</script>
</body>
</html>

package com.example.javatest;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/LoginAjax")
public class LoginAjax extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//无论是GET还是POST都能用Get方法实现
        doGet(req, resp);
    }
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String username=request.getParameter("username");
        String password=request.getParameter("password");
        ResultMap Rm=new ResultMap();
        request.setCharacterEncoding("utf-8");
        try {
            if (username.equals("admin")&amp;&amp;password.equals("pwd"))
            {
                Rm.setMessage("Success!");
                Rm.setResult(true);
            }
            else
            {
                Rm.setResult(false);
                Rm.setMessage("False!");
            }
        }
        catch (Exception e)
        {
            e.printStackTrace();
        }
        ObjectMapper Om=new ObjectMapper();//把对象转换成json格式
        String jason=Om.writeValueAsString(Rm);
        response.getWriter().println(jason);

    }
}

package com.example.javatest;
public class ResultMap {
    protected String message;
    protected  boolean result;

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public boolean getResult() {
        return result;
    }

    public void setResult(boolean result) {
        this.result = result;
    }
}