Ajax技术使用

最新推荐文章于 2024-02-01 23:38:32 发布

初夏那片海

最新推荐文章于 2024-02-01 23:38:32 发布

阅读量149

点赞数

本文链接：https://blog.csdn.net/qq_42265394/article/details/114011867

版权

web 项目中前后端交互的方式，通常选择的方案是在浏览器端通过使用 Ajax 技术调用后端提供的 api 接口来完成异步请求和页面的交互更新，

Ajax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），它是一种用于创建快速动态网页的技术，通过浏览器与服务器进行少量数据交换，Ajax 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，传统的网页如果需要更新内容，必须要进行跳转并重新加载整个网页。

Ajax 技术使得网站与用户间有了更友好的交互效果，比较常见的借助 Ajax 技术实现的功能有列表上拉加载分页数据、省市区三级联动、进度条更新等等，这些都是借助 Ajax 技术在当前页面即可完成的功能，即使有数据交互也不会跳转页面，整体交互效果有了很大的提升。

Ajax 工作流程

在这里插入图片描述
Ajax 的整个工作流程如上图所示，用户在进行页面上进行操作时会执行 js 方法，js 方法中通过 Ajax 异步与后端进行数据交互。首先会创建 XMLHttpRequest 对象，XMLHttpRequest 是 AJAX 的基础，之后会根据页面内容将参数封装到请求体中或者放到请求 URL 中，然后向后端服务器发送请求，请求成功后根据后端返回的数据进行解析和部分逻辑处理，最终在不刷新页面的情况下对页面进行局部更新。

使用Ajax需要注意的问题

数据格式问题

向后端发送的数据要为json格式

contentType:'application/json; charset=utf-8',

预计后端返回的是数据也是json格式

dataType: 'json', //预期服务器返回的数据类型

否则会报415异常

传输对象问题

向后端发送json格式的对象
需要先将前端获取的js对象转换为json格式

data:JSON.stringify(user),

示例

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testMC</title>
</head>
<body>

    <input id="name" name="name" placeholder="请输入姓名">
    <input id="password" name="password" placeholder="请输入密码">
    返回数据如下：
    <p id="returnMessage"></p>
    <!--点击提交按钮会到a方法-->
    <a href="#" onclick="aaa()">提交请求</a>

</body>

<!--使用webjars导入jquery-->
<script src="webjars/jquery/3.5.1/jquery.js"></script>

<script type="text/javascript">
    <!--$等价于JQuery-->
    function aaa() {
        //通过id选择器选择用户输入的数据，并转换为一个User对象
        var name=$('#name').val();
        var password=$('#password').val();

        var user={
            name:name,
            password:password,
        };

        $.ajax({
            //通过请求和后端进行绑定
            url: 'world',
            dataType: 'json',
            type:'POST',
            contentType:'application/json; charset=utf-8',
            //后端从data中取数据(id选择器)，键值对形式，值是前端的数据
            data:JSON.stringify(user),
            //成功或者失败都需要一个回调函数
            success:function (result) {
            //请求成功：显示在页面上
                $('#returnMessage').html(JSON.stringify(result));
            },
            error:function () {
                alert("错误");
            }
        });
    }
</script>



</html>

controller

@RequestBody 将json数据转换为java对象
@ResponseBody 将java对象转换为json数据

@Controller
public class MyController {


    //接收前端传递对象数据
    @ResponseBody
    @PostMapping("/world")
    public User world(@RequestBody User user){
        System.out.println(user);
        return user;
    }

    @RequestMapping("/test")
    public String test2(){
        return "test";
    }
}