axios请求成功而$.ajax却不行排错

简介: axios请求成功而$.ajax却不行排错

jQuery cdn

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

Axios cdn

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

附加 mui.js cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/js/mui.min.js"></script>

axios

axios.post(
          url, {
            "serviceStation": "",
            'pageSize': "10000",
            "pageNumber": "1"
          })
        .then(function(res) {
          console.log(res.data);
        });

ajax

$.ajax({
        url: url,
        type: "post",
        data: {
          "serviceStation": "",
          'pageSize': "10000",
          "pageNumber": "1"
        },
        success: function(res) {
          console.log(res);
        }
      });


查看控制台结果:

axios正确返回数据

而ajax输出如下

找到发送的请求,查看各自的请求头

ajax发送的请求头:

axios的请求头

发现其不同之处,猜测就是这个影响了最终的结果.

所以ajax添加设置请求头

headers: {
    'Content-Type': 'application/json;charset=utf8'
},


运行测试

还是未能正确返回结果,发现已经有一处设置相同了.但是还是有一处未改变.

再分别查看两个的请求参数

ajax

axios

发现axios请求参数已转为json格式 , 而ajax请求的没有

所以 再添加一步,将ajax的参数使用 JSON.stringify 转化为 JSON字符串

data: JSON.stringify({
          "serviceStation": "",
          'pageSize': "10000",
          "pageNumber": "1"
        }),

运行测试

两次成功请求数据


查看请求头,发现Accept还是未统一,但都以 application/json 为最高优先级 , 并不影响.


Accept与Content-Type相关文章

HTTP协议的消息头:Content-Type和Accept的作用

http请求头中的Accept的用处和常用的值

HTTP报文头Accept和Content-Type总结

还有一个请求方式

mui.ajax(url, {
        headers: {
          'Content-Type': 'application/json;charset=utf8'
        },
        data: {
          "serviceStation": "",
          'pageSize': "10000",
          "pageNumber": "1"
        },
        type: 'post', //HTTP请求类型
        success: function(data) {
          console.log(data);
        }
      });

也是同样问题,需设置header才能正确返回,但是并不需要将参数转换为JSON字符串


不同:

那 $.ajax 只是普通的网络请求,mui.ajax 比 $.ajax 多了一个APP才有的原生APP的网络请求跟浏览…https://ask.dcloud.net.cn/question/62485

MUI官网

相关文章
|
1月前
|
JSON 前端开发 JavaScript
Vue3 Ajax(axios)
Vue3 Ajax(axios)
|
1月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
11天前
|
API
使用axios发送请求的格式是什么?示例代码
使用axios发送请求的格式是什么?示例代码
12 0
|
9天前
|
JSON 前端开发 JavaScript
Django——Ajax请求
Django——Ajax请求
|
11天前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
9 0
|
11天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
18 2
|
1月前
|
JSON 前端开发 JavaScript
Fetch API与Ajax请求
Fetch API是JavaScript的一种新方法,用于网络请求,提供简洁的Promise-based语法和更多功能,如处理头、取消请求及跨域支持,比Ajax更强大。尽管不完全替代Ajax,尤其在老浏览器或需要底层控制时,Fetch API仍是现代浏览器中获取资源的优选工具。例如,以下代码展示了如何使用Fetch API进行GET和POST请求。
|
1月前
|
JavaScript
axios拦截器:每次请求自动带上 token
axios拦截器:每次请求自动带上 token
15 0
|
1月前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
18 1
|
1月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
26 3