Xml文件读取--获取多个数据显示浏览器端

最新推荐文章于 2023-03-14 01:39:32 发布

zuo_zuo_blog

最新推荐文章于 2023-03-14 01:39:32 发布

阅读量649

点赞数

分类专栏： PHP Ajax

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/90549121

版权

Ajax 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

PHP

10 篇文章 0 订阅

订阅专栏

它是按照某种既定的格式写的字符串，最开始要写版本号，全部使用双标签，最外层需要一个根节点，标签的名字只要不已数字和中文开头即可。

版问号作为第一行<?xml version=”1.0” encoding=”UTF-8”?>

如果使用php读取xml那么要设置header
在这里插入图片描述
3.异步对象中有另外一个属性用来专门获取 xmlconsole.log(ajax.responseXML);
4.下面这个页面文档对象如果要获取某个标签console.log(window.document);

getStars.html

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table{
			margin: 100px auto;
			border: 1px solid #0094ff;
		}
		td{
			border: 1px solid #0094ff;
		}
	</style>
</head>
<body>
	<h1>ajax获取多个明星数据</h1>
	<input type="button" value="获取数据" id="getStars">
</body>
</html>
<script type="text/javascript">
	var btn=document.querySelector("#getStars");
	btn.onclick=function(){
		var ajax=new XMLHttpRequest();
		ajax.open('post','getStars.php');
		ajax.send();
		ajax.onreadystatechange=function(){
			if(ajax.readyState==4&&ajax.status==200){
				console.log(ajax.responseXML);
				var persons=ajax.responseXML.querySelectorAll('person');

				//吧循环之前的table拼接出来
				var str="";
				str+='<table>';

				//循环获取其中某一个
				for (var i = 0;i<persons.length;i++){
					var currentPerson=persons[i];

					console.log(currentPerson.querySelector('name')
						.innerHTML);
					console.log(currentPerson.querySelector('path').innerHTML);
					console.log(currentPerson.querySelector('skill').innerHTML);

					//方法1：创建一个table
					/*document.creatElement("table").appendChild();
					document.creatElement("tr");
					document.creatElement("td");*/

					//直接拼接出一个table的字符串，设置到页面上面
					
					str+='<tr>';

					str+='<td>'+currentPerson.querySelector('name')
						.innerHTML+'</td>';
					/*str+='<td>'+currentPerson.querySelector('path')
						.innerHTML+'</td>';*/
						str+='<td><img src="'+currentPerson.querySelector('path')
						.innerHTML+'"></td>';
					str+='<td>'+currentPerson.querySelector('skill')
						.innerHTML+'</td>';
					str+='<td><a href="#">点击了解更多'+currentPerson.querySelector('name')
						.innerHTML+'</a></td>';

					str+='</tr>';


					

				}
				//循环完毕table合并
					str+='</table>';
				console.log(str);

				//直接添加到页面
				document.body.innerHTML=str;
			}
		}
	}
</script>

getStars.php

<?php 
	
	// 设置返回的是 xml
	header('content-type:text/xml; charset= utf-8');

	// 读取并返回 oh -yeah
	echo file_get_contents('info/starList.xml');
 ?>

info/.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<stars>
	<person>
		<name>黄子韬</name>
		<path>images/hzt.jpg</path>
		<skill>狗带</skill>
	</person>
	<person>
		<name>岳云鹏</name>
		<path>images/yyp.jpg</path>
		<skill>卖萌</skill>
	</person>
	<person>
		<name>韩红</name>
		<path>images/hh.jpg</path>
		<skill>唱歌</skill>
	</person>
</stars>

在这里插入图片描述

zuo_zuo_blog

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Xml文件读取--获取多个数据显示浏览器端

它是按照某种既定的格式写的字符串，最开始要写版本号，全部使用双标签，最外层需要一个根节点，标签的名字只要不已数字和中文开头即可。版问号作为第一行<?xml version=”1.0” encoding=”UTF-8”?>如果使用php读取xml那么要设置header3.异步对象中有另外一个属性用来专门获取 xmlconsole.log(ajax.responseX...
复制链接

扫一扫