Javaweb—Ajax与jQuery请求

时间:2024-11-14 14:17:21

文章目录

  • 十一.Javaweb—Ajax与jQuery请求
    • 11.1 异步/同步请求
    • 11.2 异步请求案例
      • 案例一:
      • 案例二:

十一.Javaweb—Ajax与jQuery请求

Ajax: 全称Asynchronous JavaScript And XML,异步的JavaScript和XML。

11.1 异步/同步请求

【往期文章】

  • 同步请求发送:

浏览器页面在发送请求给服务器,在服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等到服务器响应结束后才能,浏览器页面才能继续做其他的操作。

  • 异步交互:

可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。

11.2 异步请求案例

案例一:

前端页面:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>未登录</h1>
<button>登录</button>

</body>
</html>
<script src="/js/jquery-1.10.2.min.js"></script>
<script>

    $(function () {
        var str = "kwh"
        $("button").click(function () {
            $.ajax({
                url: "/ajax",
                // data: "username=admin&password=123",
                //传递json格式数据
                data:{"username":"admin","password":123},
                async: true, // true 异步, false 同步
                tpype: "get",
                datetype: "json",
                success: function (res) {
                    alert(res);
                    $("h1").text(res);
                },
                error: function () {
                    alert("not_login is error");
                }
            });
           // 异步执行 先弹出alert(str) 再执行alert(res)
            alert(str);

        });
    });
</script>

后端服务:

@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String res = "";
        //获取前端提交的参数
        String username = request.getParameter("username");
        String password = request.getParameter("password");

    if(username.equals("admin") && password.equals("123")) {
           res = "登录成功";
        }

        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(res);
    }
}

案例二:

统一响应结果:

import com.alibaba.fastjson.JSONObject;
public class ResultJSON {
    private Integer code;
    private String msg;

    public ResultJSON(Integer code, String msg) {
        this.code = code;
        this.msg = msg;
    }

    public String jsonString(){
       return new JSONObject().toJSONString(this);
    }

    public static ResultJSON success(){
        return new ResultJSON(200,"登录成功");
    }
  
  public static ResultJSON success(Integer code,String msg){
        return new ResultJSON(code,msg);
    }
  
    public static ResultJSON error(){
        return new ResultJSON(400,"登录失败");
    }
    public static ResultJSON error(Integer code,String msg){
        return new ResultJSON(code,msg);
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

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

前端页面:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>未登录</h1>
<button>登录</button>

</body>
</html>
<script src="/js/jquery-1.10.2.min.js"></script>
<script>
    $(function () {
        $("button").click(function () {
            $.ajax({
                url: "/ajax02",
                // data: "username=admin&password=123",
               //传递json格式数据
                data:{"username":"admin","password":"123"},
                async: true, // true 异步, false 同步
                tpype: "get",//使用的请求类型
                datetype: "json",//响应回来的数据类型
                success: function (res) {
                    alert(res);
                    $("h1").text(res);
                },
                error: function () {
                    alert("not_login is error");
                }
            });

        });

    });
</script>

后端服务

@WebServlet("/ajax02")
public class Ajax02Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String res = "";
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        response.setCharacterEncoding("UTF-8");

        PrintWriter writer = response.getWriter();

     if("admin".equals(username)&& "123".equals(password)) {
           writer.write(ResultJSON.success().jsonString());
        }else {
            writer.write(ResultJSON.error().jsonString());
        }
        // response.getWriter().write(res);
    }
}