后端开发者——利用jQuery实现Ajax

作为一名后端开发者，我们也需要了解一些通过jQuery实现Ajax的方法。

直接从示例代码看起：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  </head>

  <body>
    <button>GET</button>
    <button>POST</button>
    <button>通用型方法AJAX</button>

　　//先不看script的内容

...

　</script>

  </body>

</html>

此时的页面：

接下来是script中的代码

<script>
        $('button').eq(0).click(function () {
　　　　　　　//1.jQuery中ajax的第一种方式
            //get代表我们采用GET方式发送请求，get中的参数有四个分别的用处是：1.给谁发 2.传过去的参数 3.回调的函数，其中参数data是形参，叫什么名字都行 4.响应体类型，这
　　　　　　　//里我们要求的是响应数据类型为json。

            $.get('http://127.0.0.1:8000/jquery', { a: 100, b: 200 }, function (data) {
                console.log(data);
            }, 'json')
        })
　　　　　　　//这个是用POST请求发送的，并且没有要求响应数据的类型为什么，所以我们可以与第一种返回的json类型进行对照。
        $('button').eq(1).click(function () {
            $.post('http://127.0.0.1:8000/jquery', { a: 100, b: 200 }, function (data) {
                console.log(data);
            })
        })
　　　　　　//2.jQuery中ajax的第二种方式


        $('button').eq(2).click(function () {
            $.ajax({
                //url：你要给谁发
                url: 'http://127.0.0.1:8000/delay',
                //参数：你要传过去的参数
                data: { a: 100, b: 200 },
                //请求类型：采用GET还是POST方法
                type: 'GET',
                //响应体返回类型设置
                dataType: 'json',
                //成功时的回调，其中data为形参
                success: function (data) {
                    console.log(data);
                },
                //超时时间，当然这个属性可以不设置，这里只是做个示范
                timeout: 2000,
                //失败时的回调,比如上面超时后，就会执行这个失败回调
                error: function () {
                    console.log('出错了');
                },
            })
        })
    </script>

服务端内容：

不用管这个app.all是啥意思，我们只看方法里面的内容：

　　第一句response.setHeader(...)也不必看

　　第二句：创建一个js对象叫做data，其内容为有一个值为asd的name属性。

　　第三句：将data作为响应返回给客户端。其中JSON.stringify()方法是将 JavaScript 对象转换为字符串，这里为什么转换为字符串，其实没什么特殊意义，ajax也能传输js对象，这里只是为了验证我们自己设定的响应体的数据类型是否有效。

　　这样我们前端收到的就是一个“{name:'asd'}”字符串，而我没第一个使用get的ajax操作设定了返回值为json类型，所以其会自动转换将json形式的字符串转换为json对象，但是如果我们后端回传的数据不是json格式的字符串，而是一个普通的字符串，比如“asdasd”，这时就无法获取到响应的值了，就会报错（304错误），也就是说，如果我们设定了响应体为json类型，只要响应的数据是json类型的字符串，就会自动转换为json对象。

结果：点击GET获得的是JSON对象，而点击POST获得的是一个字符串

我们现在想与后端的controller进行数据交互，

后端controller代码：

writeValueAsString()方法：将传入的对象序列化为json类型的字符串，返回给调用者。

比如这里的User，经过序列化后就是字符串:{"name":"小明","age":"100","id":"200"}

前端的部分代码：

<button>click to GET</button>
    <script>
        $('button').eq(0).click(function () {
            $.ajax({
                //url
                url: 'http://localhost:8080/con01/ajaxTest',
                //参数
                data: { a: 100, b: 200 },
                //请求类型
                type: 'GET',
                //响应体结果设置
                dataType: 'json',
                //成功时的回调
                success: function (data) {
                    //后台传过来的json字符串会根据dataType自动转换为json对象（也即JavaScript对象），所以这里的data为js对象
　　　　　　　　　　　　//利用JSON.stringify将json对象转为字符串
                    var str = JSON.stringify(data)

　　　　　　　　　　　　//JSON.parse()方法：将json格式的字符串转换为js对象

                    var data1 = JSON.parse(str);
                    console.log(str);
　　　　　　　　　　　　console.log(data1);
                    console.log(data);
                    console.log(data.name);
                    console.log(data.age);
                    console.log(data.id);

                },
                // //超时时间
                // timeout: 2000,
                //失败时的回调,比如上面超时后，就会执行这个失败回调
                error: function (data) {
                    console.log(data);
                    console.log('出错了');
                },
                // //头信息：
            })
        })
    </script>

JSON.stringify()方法：将js对象转换为字符串
JSON.parse()方法：将json格式的字符串转换为js对象

User实体类：

package com.example.demo.pojo;

public class User {
    public String name;
    public String age;
    public String id;
}

页面效果以及输出：

当然了，我们也可以返回别的类型的数据，不一定只要json类型数据。

注：如果我们前端传入的参数是多个的话，我们需要在后端接受的时候参数名要与前端传过来的参数名相同才能匹配，或者添加@RequestParam()注解进行映射

比如：我们前端传过来的参数是：

　　　　那我们后端：

posted @ 2023-03-20 21:16 StormArcita 阅读(115) 评论(0) 收藏举报

刷新页面返回顶部

Loading

暴风雅诗塔

后端开发者——利用jQuery实现Ajax

公告