vue 在ajax success回调函数中 this 的使用问题。

在success回调函数中,直接使用this 会有失效的问题。

 

原因:this指的是ajax对象,而不是当前的vue实例。

解决办法:在使用之前 将this.变量赋值给新的变量,再在回调函数中使用。

var that = this;

当然也可以使用箭头函数。

原因:箭头函数内部的this是词法作用域,由上下文确定。

所以这里的箭头函数指向的函数内部的this已经绑定了外部的vue实例。

如果你想在 Vue 使用自己封装的原生 ajax,可以按照以下步骤操作: 1. 在 Vue 组件定义一个方法,用于发送 ajax 请求: ```javascript methods: { ajax: function(options) { var xhr = new XMLHttpRequest(); //创建 XMLHttpRequest 对象 xhr.onreadystatechange = function() { if (this.readyState == 4) { //请求完成 if (this.status == 200) { //请求成功 options.success(xhr.responseText); } else { //请求失败 options.error(xhr.status); } } }; xhr.open(options.method, options.url, true); //设置请求方法和地址 xhr.send(options.data); //发送请求 } } ``` 在上述代码,`ajax` 方法接收一个对象作为参数,包含以下属性: - `method`:请求方法,例如 `"GET"` 或 `"POST"`。 - `url`:请求地址。 - `data`:发送的数据,可以是字符串或 FormData 对象。 - `success`:请求成功时的回调函数。 - `error`:请求失败时的回调函数。 2. 在组件调用 `ajax` 方法发送 ajax 请求: ```javascript this.ajax({ method: 'POST', url: '/api/login', data: new FormData(document.querySelector('#login-form')), success: function(response) { console.log(response); }, error: function(status) { console.log('请求失败,状态码为:' + status); } }); ``` 在上述代码,我们通过调用 `ajax` 方法来发送一个 POST 请求,将表单数据作为参数传递给 `data` 属性。当请求成功时,会调用 `success` 回调函数,将服务器返回的数据作为参数传递给它。当请求失败时,会调用 `error` 回调函数,将 HTTP 状态码作为参数传递给它。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值