Javaweb—Ajax与jQuery请求

文章目录

十一.Javaweb---Ajax与jQuery请求

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

11.1 异步/同步请求

【往期文章】

  • 同步请求发送:

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

  • 异步交互:

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

11.2 异步请求案例

案例一:

前端页面:

jsp 复制代码
<%@ 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>

后端服务:

java 复制代码
@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);
    }
}

案例二:

统一响应结果:

java 复制代码
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;
    }
}

前端页面:

jsp 复制代码
<%@ 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>

后端服务

java 复制代码
@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);
    }
}
相关推荐
木古古182 分钟前
使用chrome 访问虚拟机Apache2 的默认页面,出现了ERR_ADDRESS_UNREACHABLE这个鸟问题
前端·chrome·apache
爱米的前端小笔记12 分钟前
前端八股自学笔记分享—页面布局(二)
前端·笔记·学习·面试·求职招聘
飞升不如收破烂~17 分钟前
Spring boot常用注解和作用
java·spring boot·后端
loey_ln34 分钟前
webpack配置和打包性能优化
前端·webpack·性能优化
建群新人小猿35 分钟前
会员等级经验问题
android·开发语言·前端·javascript·php
爱上语文36 分钟前
HTML和CSS 表单、表格练习
前端·css·html
何遇mirror40 分钟前
云原生基础-云计算概览
后端·云原生·云计算
岁岁岁平安1 小时前
springboot实战(15)(注解@JsonFormat(pattern=“?“)、@JsonIgnore)
java·spring boot·后端·idea
djk88881 小时前
Layui Table 行号
前端·javascript·layui