Java Web之Ajax

在之前的学习web前端专栏中已经对Ajax相关知识有过介绍了，不清楚的同学可以看一下这篇博客：从零开始学习WEB前端之数据交互（Ajax） 这里就不在赘述了。

但是之前是用PHP简单的搭了个环境，既然现在学习到javaweb了，那我们就使用java的相关知识来完成一次前后端数据交互的流程。

例子很简单，还是一个登录的示例

这里我们就直接用Jquery版的Ajax进行请求了
首先下载Jquery

这里处理json数据依然使用的是Gson

首先我们先来定义个实体类，用于封装返回数据。

LoginResponse
就两个字段，fig和msg

package data;

public class LoginResponse {

    /*状态  0表示成功 否则表示失败*/
    private String fig;
    /*信息*/
    private String msg;

    public String getFig() {
        return fig;
    }

    public void setFig(String fig) {
        this.fig = fig;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }
}

LoginServlet
实体类有了，下面我们来创建个servlet处理登录请求，并将结果返回给客户端。这里返回json数据

package servlet;

import com.google.gson.Gson;
import data.LoginResponse;

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(name = "LoginServlet", urlPatterns = "/login.do")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

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

        String account = request.getParameter("account");
        String pwd = request.getParameter("pwd");

        LoginResponse loginResponse = new LoginResponse();

        if (account.equals("yzq") && pwd.equals("123456")) {
            /*返回登录成功*/
            loginResponse.setFig("0");
            loginResponse.setMsg("登录成功");
        } else {
            loginResponse.setFig("-1");
            loginResponse.setMsg("登录失败");
        }


        /*将实体类转成json*/
        String result = new Gson().toJson(loginResponse);
        System.out.println("返回的结果：" + result);


        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        /*返回数据*/
        response.getWriter().write(result);

    }
}

登录页面

下面我们在登录页面使用Ajax进行请求，并将请求结果显示到div标签中

<%--
  Created by IntelliJ IDEA.
  User: yzq
  Date: 2018/7/30
  Time: 13:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


    


    






用户名：


密码：


ajax登录
get登录
post登录





登录结果：

运行结果;

demo