vue发送Http请求之XMLHttpRequest

浏览器报错：Cannot read property ‘push’ of undefined at XMLHttpRequest.ajaxObj.onreadyst

vue中发送Http请求，这里说明不会使用axios ，baseUrl已经有过了，不想在创建baseUrl，所以采用http请求，请求发送成功。

因为跨域原因，所以内部this不能赋值。
xhr.onreadystatechange = function()导致此引用更改为XMLHttpRequest对象.因此,this.customerArray不再存在.为了避免这种情况,请为原始的this创建新的引用：

<template><div class="app-container"><el-row :gutter="20"><!-- 部门数据，搜索框--><el-col :span="6" :xs="24"><div class="head-container"><el-inputv-model="symbolName"placeholder="请输入部门名称"clearablesize="small"prefix-icon="el-icon-search"style="margin-bottom: 20px"/></div><div class="head-container" style="height:600px"><el-scrollbar style="height:700px"><el-treeref="tree"class="filter-tree":data="datas":props="defaultProps":expand-on-click-node="false":filter-node-method="filterNode"@node-click="handleNodeClick"/></el-scrollbar></div></el-col></el-row></div>
</template>
<script>
export default {name: 'Standard',// 把变量作为全局变量初始化（重点）treeData: [],treeDatas: [],data() {return {// 遮罩层loading: true,trees: {symbolName: '',childNodes: []},datas: [],//defaultProps: {children: 'childNodes',label: 'symbolName'}}},created() {this.getList()},methods: {/** 查询性能列表 */getList() {this.loading = false// 创建XML请求var ajaxObj = new XMLHttpRequest()// 以get形式进行发送请求ajaxObj.open('get', 'http://192.168.12.76:800/iserver/services/plot-jingyong/rest/plot/symbolLibs/10.json')// 请求结束断开ajaxObj.send()// 初始化变量（必要）this.trees = {}this.treeData = []// 转入： this转为function（）方法内部函数（重点）const that = thisajaxObj.onreadystatechange = function() {if(ajaxObj.readyState === 4 && ajaxObj.status === 200){// debugg// 请求放回的结果以文本形式，使用JSON.parse()方法进行转为json形式var data = JSON.parse(ajaxObj.responseText)var item = data.rootSymbolLibNodeconsole.log('数据返回成功', data.rootSymbolLibNode)that.trees = {symbolName: item.symbolName,childNodes: item.childNodes,symbolNodeType: item.symbolNodeType}that.treeData.push(that.trees)}}this.treeDatas = that.treeData// 转出：内部that指向vue中的thisthis.datas = this.treeDatas},// 点击树节点handleNodeClick(node) {console.log(node)},// 节点筛选filterNode(value, data) {if (!value) return truereturn data.label.indexOf(value) > 0},}
}
</script>

vue发送Http请求之XMLHttpRequest相关推荐

Vue 发送数据请求
这边是将我之前开发的一个项目开发记录进行分享一下吧,可能写的不是很好,毕竟还只是一个在校生.只能说还是一个新手小白的开发记录吧. 有需要的可以借鉴一下,有问题哈哈也欢迎指出,毕竟发现问题才能更好的进 ...
vue 发送ajax请求
一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...
js如何发送ajax请求,js 发送ajax请求（XMLHttpRequest）
ajax({ url: "http://localhost:8080/save", type: "POST", data: {}, dataType: &quo ...
前端学习（1483）：在vue发送网络请求
promise的应用和在VUE中使用axios发送AJAX请求服务器
promise 用promise对函数封装: 原来的代码: <!DOCTYPE html> <html> <head><title>vue demo&l ...
原生html如何发送网络请求,原生JS发送HTTP请求的方式：XMLHttpRequest.send()
在前端开发过程中,就目前来看,发送HTTP请求,大家习惯在框架里去应用,比如vue,react等.我们在往前追朔下,用的最多的是jQuery里的ajax.但是最原始的发送HTTP请求方式是什么呢?一起 ...
Vue之axios发送Ajax请求
2.10 axios发送ajax请求 axios github 2.10.1 准备工程创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...
vue如何发送网络请求，使用axios事半功倍！
目录一.axios使用 1.支持多种请求方式: 2.安装 3.简单使用实例 4.发送并发请求 5.全局配置二.axios的实例 1.为什么要创建 axios的实例呢? 2.使用三..axios模 ...
vue axios 发送get请求传递参数给后端失败_Java之Vue插件之Axios
Java之Vue插件之Axios,环境安装: npm install --save axios vue-axios //安装axios Npm install //安装依赖在main.js中注册 i ...

vue发送Http请求之XMLHttpRequest

vue发送Http请求之XMLHttpRequest相关推荐

最新文章

热门文章