vue发送Http请求之XMLHttpRequest
浏览器报错:Cannot read property ‘push’ of undefined at XMLHttpRequest.ajaxObj.onreadystvue中发送Http请求,这里说明不会使用axios ,baseUrl已经又过了,不想在创建baseUrl,所以采用http请求,请求发送成功。因为跨域原因,所以内部this不能赋值。xhr.onreadystatechange = f
·
浏览器报错: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-input
v-model="symbolName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container" style="height:600px">
<el-scrollbar style="height:700px">
<el-tree
ref="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 = this
ajaxObj.onreadystatechange = function() {
if(ajaxObj.readyState === 4 && ajaxObj.status === 200){
// debugg
// 请求放回的结果以文本形式,使用JSON.parse()方法进行转为json形式
var data = JSON.parse(ajaxObj.responseText)
var item = data.rootSymbolLibNode
console.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中的this
this.datas = this.treeDatas
},
// 点击树节点
handleNodeClick(node) {
console.log(node)
},
// 节点筛选
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) > 0
},
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)