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" %>
<html>
<head>
    <title>登录</title>


    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>


    <script>
        $(function () { 
   
            $("#ajaxBtn").on("click", function () { 
   
                /*调登录*/
                loginWithAjax()
            })
            $("#getBtn").on("click", function () { 
   
                /*调登录*/
                loginWiteGet()
            })
            $("#postBtn").on("click", function () { 
   
                /*调登录*/
                loginWithPost()
            })

        })

        function loginWithAjax() { 
   
            $.ajax({ 
   
                url: "<%=application.getContextPath()%>/login.do",
                data: { 
   account: $("input[name=account]").val(), pwd: $("input[name=pwd]").val()},
                type: "POST",
                success: function (result) { 
   
                    console.log(result)
                    $("#result").html(result.msg)

                },
                beforeSend: function () { 
   
                    console.log("请求发送之前")
                },
                error: function () { 
   
                    console.log("失败时调用")
                }
            })
        }


        function loginWiteGet() { 
   
            $.get(
                "<%=application.getContextPath()%>/login.do",
                { 
   account: $("input[name=account]").val(), pwd: $("input[name=pwd]").val()},
                function (data) { 
   
                    console.log(result)
                    $("#result").html(data.msg)


                })
        }


        function loginWithPost() { 
   
            $.post(
                "<%=application.getContextPath()%>/login.do",
                { 
   account: $("input[name=account]").val(), pwd: $("input[name=pwd]").val()},
                function (data) { 
   
                    console.log(result)
                    $("#result").html(data.msg)
                })

        }


    </script>


</head>
<body>


用户名：<input name="account" type="text"/>
<br>
密码：<input name="pwd" type="text">
<br>
<button id="ajaxBtn">ajax登录</button>
<button id="getBtn">get登录</button>
<button id="postBtn">post登录</button>


<hr>


登录结果：
<div id="result"></div>


</body>
</html>