通过AJAX在 Vue 中获取XML文件数据

已于 2024-02-19 18:28:04 修改
阅读量1.5k 收藏 26
点赞数 29
分类专栏： # Vue2实战指南 文章标签： vue.js ajax xml
于 2023-12-28 17:46:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/135222491
版权

在这里插入图片描述

查看本专栏目录


关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

热门推荐内容链接
1openlayers 从基础到精通，300+代码示例
2leaflet 热门分解学习教程，150+图文示例
3cesium 从0到1学习指南，200+代码示例
4 mapboxGL 从入门到实战，150+图文示例
5canvas 示例应用100+，揭密底层细节
6javascript从基础到高级，示例展示200+
7vue2 实战指南，100+个细节深度剖析

在这里插入图片描述

目录


vue项目中如何使用 AJAX 来读取来自 XML 文件的信息呢？当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用已经填充了 XML 数据的 HTML 表格来更新 djs占位符。

示例效果图

在这里插入图片描述

示例源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-12-28
*/

<template>
	<div class="djs-box">
		<div class="topBox">
			<h3>vue中使用 AJAX来读取来自XML文件的信息 </h3>
			<div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>
		<h4>
			<el-button type="success" size="small" @click="showXML('/data/demo.xml')">显示XML内容</el-button>
		</h4>
		<div class="dajianshi" id='djs'></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				textdata: '',
			}
		},
		mounted() {

		},
		methods: {
			showXML(url)
			{
			var xmlhttp;
			var txt,x,xx,i;
			if (window.XMLHttpRequest)
			  {// code for IE7+, Firefox, Chrome, Opera, Safari
			  xmlhttp=new XMLHttpRequest();
			  }
			else
			  {// code for IE6, IE5
			  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			  }
			xmlhttp.onreadystatechange=function()
			  {
			  if (xmlhttp.readyState==4 && xmlhttp.status==200)
			    {
			    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
			    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
			    for (i=0;i<x.length;i++)
			      {
			      txt=txt + "<tr>";
			      xx=x[i].getElementsByTagName("TITLE");
			        {
			        try
			          {
			          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
			          }
			        catch (er)
			          {
			          txt=txt + "<td> </td>";
			          }
			        }
			      xx=x[i].getElementsByTagName("ARTIST");
			        {
			        try
			          {
			          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
			          }
			        catch (er)
			          {
			          txt=txt + "<td> </td>";
			          }
			        }
			      txt=txt + "</tr>";
			      }
			    txt=txt + "</table>";
			    document.getElementById('djs').innerHTML=txt;
			    }
			  }
			xmlhttp.open("GET",url,true);
			xmlhttp.send();
			}
	
		}
	}
</script>
<style scoped>
	.djs-box {
		width: 900px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid seagreen;
	}

	.topBox {
		margin: 0 auto 0px;
		padding: 10px 0 20px;
		background: green;
		color: #fff;
	}

	.dajianshi {
		width: 90%;
		height: 300px;
		margin: 50px auto 0;
		overflow-y: auto;
	}
</style>

demo.xml数据内容


<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等

还是大剑师兰特
关注
专栏目录
vue ajax渲染数据,Vue2 异步获取的数据(通过ajax)获取的数据 渲染到dom上
weixin_36206388的博客
08-05 1095
页面dom结构如下姓名： {{msg.name}}年龄： {{msg.old}}地址： {{msg.address}}id： {{msg.user_id}}删除jsvar app = new Vue({el:'#app',data:{msg:{name:'zhangsan',old:'18',address:'shanghai',user_id:'101010',}},//可以将渲染数据的操作放...
Vue2.X 通过AJAX动态更新数据
12-11
在这个场景中，开发者面临的问题是在Vue2.X项目中如何利用AJAX来动态更新数据。本文将详细讲解这一过程。 首先，Vue.js的核心概念之一就是其响应式数据绑定，即当数据发生变化时，视图会自动更新以反映这些变化。在...
详解vue 中使用 AJAX获取数据的方法
01-19
在VUE开发时，数据可以使用jquery和vue-resource来获取数据。在获取数据时，一定需要给一个数据初始值。 看下例： [removed] new Vue({ el:'#app', data:{data:}, created:function(){ var url=json.jsp; var _self=this; $.get(url,function(data){ _self.data=eval(( + data +
vue 读取xml文件，记录
cscscssjsp的博客
12-27 7429
1.项目需求，后台响应的是xml文件，故在前端先做测试，解析本地xml文件 test.xml <?xml version="1.0" encoding="UTF-8"?> <root> <lbs> <lb> <label>合同编号</label> <text>123456</te...
Vue实战指南通过AJAX在Vue中获取XML文件数据
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-18 1678
本文将详细介绍如何在Vue.js项目中使用AJAX请求来获取XML格式的数据，并展示几种不同的实现方法以及一些实用的开发技巧。当我们的应用需要从服务器动态地获取XML格式的数据时，就需要用到AJAX技术了。比如，在一个天气预报应用中，我们可能会从远程服务器获取XML格式的天气数据，然后将其解析并展示给用户。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，
vuews从ajax获取数据
csdndddsd的博客
01-26 600
vuews从ajax获取数据。
vue读取修改svg颜色 并转换为base64格式
yangwq的博客
01-07 1963
created() { this.title = this.readFile("../../../static/images/雷达.svg"); console.log(this.title,"svg文件读取"); var newSvg=this.title.replace(/#(?:[0-9a-fA-F]{6})/, "#f1f1f1"); console.lo...
javascript 读取XML数据，在页面中展现、编辑、保存的实现
10-29
在这段关于“javascript 读取XML数据，在页面中展现、编辑、保存的实现”的内容中，所涉及的关键知识点...- 最后，将修改后的数据通过Ajax请求发送到后端服务器（处理文件），由服务器端脚本进行数据的最终保存操作。
vue使用ajax获取后台数据进行显示的示例
12-09
在这个示例中，Vue.js 被用来通过Ajax技术从后台获取数据并将其显示在页面上。Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分...
vue通过ajax获取数据
qq_42048638的博客
10-30 1274
created() 当vm实例的data和methods初始化完毕后 vm实例会被动执行created这个生命周期函数 status，message后台传回来的 <div class="table-responsive" id="app"> <table class="table"> <tr> <th>...
vue使用ajax获取数据
Seven_drunk的博客
08-12 655
home.vue 父组件往子组件传值，先绑定，后props：【】 <template> <div> <home-header></home-header> <home-swiper :swiperList="swiperList"></home-swiper> <home-icons></ho...
vue js读取xml文件并转为对象
zlj_code的博客
12-02 2627
<?xml version='1.0' encoding='utf-8'?> <root> <name>张三</name> <age>18</age> <sex>男</sex> <birthday>2020-12-02</birthday> </root> 代码处理 GetxmlTosData(xmlString){ var xmlDoc=null;
vue 的ajax 的代码
weixin_30433075的博客
03-06 149
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo"> <p>{{name}}</p> </div> ...
vue 中使用 AJAX获取数据的方法
weixin_30762087的博客
10-31 194
在VUE开发时，数据可以使用jquery和vue-resource来获取数据。在获取数据时，一定需要给一个数据初始值。 看下例： <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, creat...
vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
weixin_29586681的博客
08-05 816
在VUE开发时，数据可以使用jquery和vue-resource来获取数据。在获取数据时，一定需要给一个数据初始值。看下例：new Vue({el:'#app',data:{data:""},created:function(){var url="json.jsp";var _self=this;$.get(url,function(data){_self.data=eval("(" + dat...
vue的ajax（Axios从远程/后台读取数据）
热门推荐
muzidigbig的博客
07-18 3万+
Axios从远程读取数据 学习Axios的知识，并把数据从远端读取到页面上。后端数据，只要调用相应的页面就可以调取，在实际开发中，这些后台数据是需要后端程序员和你共同讨论制作的。我们现在只做前端，数据大家只要会调用即可。 Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库，用于浏览器和node.js中，API。 浏览器中创建XMLHttpRequests 从node....
Vue使用ajax(axios)请求后台数据
豪先生的博客
03-17 1万+
前言：页面上那些数据，绝大部分都不是静态的数据，而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的去实现这一点，下面是详解在vue中如何使用它。 vue本身它是不支持直接发送ajax请求的，需要用到axios（一个基于promise的HTTP库，可以用在浏览器和node.js中）这是Axios文档的介绍，详细可查看：使用说明 · Axios 中文说明 · 看云 Axios安装 前台部分 1、npm安装 npm i axios -S //......
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值