ajax - 支持页面的局部刷新

最新推荐文章于 2021-09-06 17:14:02 发布

明别

最新推荐文章于 2021-09-06 17:14:02 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/DZiXin/article/details/108393139

版权

ajax

支持异步请求，支持页面的局部刷新在这里插入图片描述

JS原生ajxa

核心对象：XMLHttpRequest 对象

    <script>
      onload = function() {
        document.getElementById("btn1").onclick = function () {
          // 在这里发送ajax请求
          // 1.创建发送异步请求的对象
          var request = new XMLHttpRequest();

          // 3.设置响应事件
          request.onreadystatechange = function () {
            // 4.正常接收到响应数据 要执行的代码
            if (request.readyState == 4 && request.status == 200) {
              document.getElementById("myDiv").innerHTML = request.responseText;
            }
          }
          // 2.发送请求 (同步/异步)
          request.open("GET", "/web_war_exploded/DemoServlet", true);
          request.send();
        }
      }
    </script>

<body>
    <button id="btn1">使用JS发送ajax异步请求</button>
    <br/>
    <div id="myDiv"></div>
</body>

JQuery发送ajax请求

$.get() — 只能发送异步请求，默认字符集：utf-8

$("#btn1").click(function () {
        // 发送get的异步请求
        $.get("/web_war_exploded/DemoServlet", // 请求地址
            "id=1&name=张三", // 提交的请求参数
            function(response) {
                // response是响应回来的数据
                console.log("响应回来的数据是: " + response);
                $("#myDiv").html(response);
            },
            "text" // 响应回来的数据类型 text-普通文本
        );
    });

$.post() — 只能发送异步请求，默认字符集：utf-8

$("#btn2").click(function () {
        // 发送post的异步请求
        $.post("/web_war_exploded/DemoServlet", // 请求地址
            // "id=1&name=" + $("#input").val(), // 提交的请求参数
            {
                id: 1,
                name: $("#input").val()
            },
            function(response) {
                // response是响应回来的数据
                $("#myDiv").html(response);
            },
            "text" // 响应回来的数据类型 text-普通文本
        );
    });

$.ajax() — 同步/异步

$("#btn3").click(function () {
        $.ajax({
            url: "/web_war_exploded/DemoServlet", // 请求地址
            data: {
                id: 1,
                name: $("#input").val()
            }, // 请求参数
            success: function(data) {
                $("#myDiv").html(data.name + ", " + data.age);
            }, // 响应回调函数
            dataType: "json",// 响应数据类型
            type: "GET",// 请求方式
            async: false // 异步/同步, 默认true:异步
        });
    });

        String id = request.getParameter("id");
        String name = request.getParameter("name");
        String json = "{ \"name\": \""+ name +"\", \"age\": "+ id +" }";
        
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(json);

注册案例：判断用户名是否存在

在这里插入图片描述

$("#username").blur(function() {
		$.get("/web_war_exploded/CheckUserServlet",
			{username: this.value},
			function(data) {
				if(data.flag){
					$("#usernameError").html("用户名已存在");
				} else {
					$("#usernameError").html("用户名可用");
				}
			},
			"json"
		);
	});

        // 1.接收请求参数 - 用户名
        String username = request.getParameter("username");

        // 2.调用service获得结果 - boolean
        UserService us = new UserServiceImpl();
        boolean isExists = us.checkUser(username);
        // 3.返回响应 - json
        // { "isExists" : true }
//        String json = "{ \"isExists\" : "+isExists+" }";
        ResponseInfo info = new ResponseInfo();
        info.setFlag(isExists);
        response.setContentType("application/json;charset=utf-8");
        // 将Java中的对象 -> 转换成json对象
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getOutputStream(), info);
//        response.getWriter().write(json);

    @Override
    public boolean checkUser(String username) {
        UserDao ud = new UserDaoImpl();
        User user = ud.findUserByUsername(username);
        if (user != null) {
            return true;
        }
        return false;
    }

    private JdbcTemplate jdbcTemplate = new JdbcTemplate(DruidUtils.getDataSource());
    @Override
    public User findUserByUsername(String username) {
        String sql = "select * from user where name = ?";
        List<User> list = jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(User.class), username);
        return list.size() == 0 ? null:list.get(0);
    }