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);
    }
}
相关推荐
夜色呦2 分钟前
掌握ECMAScript模块化:构建高效JavaScript应用
前端·javascript·ecmascript
peachSoda72 分钟前
随手记:简单实现纯前端文件导出(XLSX)
前端·javascript·vue.js
背水7 分钟前
初识Spring
java·后端·spring
晴天飛 雪17 分钟前
Spring Boot MySQL 分库分表
spring boot·后端·mysql
大叔是90后大叔19 分钟前
vue3中查找字典列表中某个元素的值对应的列表索引值
开发语言·前端·javascript
weixin_5375904520 分钟前
《Spring boot从入门到实战》第七章习题答案
数据库·spring boot·后端
Greg_Zhong22 分钟前
Angular 和 Vue2.0 对比
前端·angular·vue 2
Tttian62230 分钟前
Vue全栈开发旅游网项目(11)-用户管理前端接口联调
前端·vue.js·django
清尘沐歌36 分钟前
前端开发快速进行 Mock 数据的方法
前端·mock