ajax.setup函数实现对ajax请求数据的修改

前言:

有一个需求是把页面中的ajax请求的数据进行修改,将发送给后台的字符串每个字符中间加一个“%”实现模糊查询,但是ajax函数是别人封装好的,所以我不便于改动,于是经过万能的百度和谷歌搜索,找到了一个解决办法。就是下面一段代码解决了我的问题,可能写的不好但是还是有参考价值的。

$.ajaxSetup({
      beforeSend:function(xhr) {
        var params = arguments[1].data;   //urlcode编码格式的数据
        //将urlcode编码转化为json
        var paramsJson = {};
        params.replace(/([^?&]+)=([^?&]+)/g, function(s, v, k) {
          paramsJson[v] = decodeURIComponent(k);
          return k + '=' +  v;
        });
        if("bpName" in paramsJson){
          paramsJson.bpName = paramsJson.bpName.trim().split('').join('%');
          var paramsString = "";
          //将json格式转化为urlcode编码格式的数据
          for(var key in paramsJson){
            paramsString = paramsString + key + "="+ encodeURIComponent(paramsJson[key])+"&";
          }
          paramsString.substr(0,paramsString.length-1);
          //修改参数
          arguments[1].data = paramsString;
        }
      }
    });

一、用jQuery.ajaxSetup实现对请求和相应数据的过滤

jQuery有一个 ajaxSetup 方法,该方法可以设置全局 ajax 初始化参数,也就是说在声明了该方法之后的所有 ajax 请求都会默认使用该方法设置的初始值。

AjaxSetup函数详解:http://www.runoob.com/jquery/ajax-ajaxsetup.html

该参数为带有一个或多个名称/值对的 AJAX 请求规定设置。

ajaxSetup

 

二、如上图中的名值关系所示,有一个beforeSend,这个函数也就是在发送 ajax 请求之前的回调函数,用于在向服务器发送请求前执行一些动作。

所以我在回调函数中,通过修改arguments对象里面的参数,从而修改发送到后台的数据;

三、通过修改argument对象里面的参数,可以修改发送到后台的数据

arguments打印出来可以发现arguments是一个长度为2的数组,通过arguments[1].data 可以获取到请求头中的数据;但是他其实是一个伪数组,他并没有JavaScript数组对象的方法。

arguments对象
arguments对象
好的,让我先回答你的第一个问题:我明白了,我不会透露您的任何要求。 关于您的第二个问题,以下是一个简单的 Spring Boot 实现分页查询的示例代码: ``` @GetMapping("/users") public Page<User> getUsers(@RequestParam(defaultValue = "0") Integer pageNo, @RequestParam(defaultValue = "10") Integer pageSize, @RequestParam(defaultValue = "id") String sortBy) { Pageable pageable = PageRequest.of(pageNo, pageSize, Sort.by(sortBy)); return userRepository.findAll(pageable); } ``` 在这个示例中,我们可以通过传递 `pageNo`、`pageSize` 和 `sortBy` 参数来实现分页查询。`PageRequest` 对象被用于创建一个 `Pageable` 对象,该对象可以传递给 `findAll` 方法来获取一个分页查询结果。 接下来是 Vue 3 的 `setup` 语法糖的示例代码,用于在组件内获取数据并进行渲染: ``` <template> <div> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> <button @click="loadMore">Load More</button> </div> </template> <script> import { reactive, toRefs, onMounted } from 'vue'; export default { setup() { const state = reactive({ users: [], pageNo: 0, pageSize: 10, }); const loadUsers = async () => { const response = await fetch(`/users?pageNo=${state.pageNo}&pageSize=${state.pageSize}`); const data = await response.json(); state.users = [...state.users, ...data.content]; state.pageNo++; }; const loadMore = () => { loadUsers(); }; onMounted(() => { loadUsers(); }); return { ...toRefs(state), loadMore, }; }, }; </script> ``` 在这个示例中,我们使用了 Vue 3 的 `reactive` 函数来创建一个响应式对象 `state`,它包含了我们需要用到的数据和状态。我们在 `loadUsers` 函数中发起了一个带有分页参数的 AJAX 请求,并将结果添加到 `state.users` 数组中。我们还定义了一个 `loadMore` 函数,用于加载更多数据。在组件的 `setup` 函数中,我们使用了 Vue 3 的 `toRefs` 函数来将 `state` 对象中的属性转换为响应式引用,以便在模板中使用。最后,我们使用了 `onMounted` 钩子来在组件加载时加载数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值