当前位置：首页 > article >正文

Javaweb—Ajax与jQuery请求

article 2024/11/15 4:24:45

文章目录

十一.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);
    }
}