ajak 拉取json数据填充html

最新推荐文章于 2021-06-28 10:09:16 发布

雕琢时光纸戆

最新推荐文章于 2021-06-28 10:09:16 发布

阅读量449

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/TISRNW/article/details/102759540

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

通过ajak方法访问文件，获取其中的数据，将其填充到HTML中

 xhr.onreadystatechange = function(){
				 if(xhr.status == 200 && xhr.readyState == 4){
					  var result = JSON.parse(xhr.response)
					  console.log(result)
					  }
					  }

访问之后打印出来的是一个数组的形式
在这里插入图片描述

完成图
在控制台以数组的形式获取数据之后我们加等一个字符串并将其填充到页面中，用forEach（）函数将数据替换一写就完成了。
下面是代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body {
				background-color: #eee;
			}

			.card {
				background-color: white;
				width: 200px;
				height: 100px;
				float: left;
				margin: 5px;

			}

			.card .name {
				padding: 20px 0px;
				text-align: center;
				/* font-size: 20px; */
			}

			.card .age {
				text-align: center;
				padding: 3px 0px;
				font-size: 0.9em;
			}
		</style>
	</head>
	<body>
		<div id="root">

		</div>
		<script type="text/javascript">
			// var f = function(){

			// }
			// function f2 (){

			// }
			var xhr = new XMLHttpRequest()
			xhr.open('GET', 'http://127.0.0.1:1080/', true)
			xhr.send();


			var tpl = '<div class="card">' +
				'<div class="name">' +
				'袁志航' +
				'</div>' +
				'<div class="age">' +
				'21' +
				'</div>' +
				'</div>'
			//这是一个对象格式的字符串
			//json
			var obj = "{name : 'Aac'}"
			xhr.onreadystatechange = function() {
				if (xhr.status == 200 && xhr.readyState == 4) {
					var result = JSON.parse(xhr.response)
					console.log(result)

					var str= ''
					result.forEach(function(item,index){
					 str += tpl.replace('袁志航',result[index].name)
					            .replace('21',result[index].age)
					})

					// console.log(str)
					//  document.getElementById('root').innerHTML = str
					//  //.result

					// studentName.innerHTML = result.name
					// console.log(typeof(xhr.response))
					// console.log(xhr.response)

					//get请求是明文 POST 
				}
			}
		</script>
	</body>
</html>

练习的时候没有数据联系的话，我么可以下一个数据库，这里用的是mongodb，通过以下代码我们可以连接到数据库中链接你创造的数据。

var express = require('express')
var app = express()
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/runoob";
// respond with "hello world" when a GET request is made to the homepage
app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  next();
});
app.get('/', function (req, res) {
  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    var dbo = db.db("runoob");
    dbo.collection("runoob"). find({}).toArray(function(err, result) { // 返回集合中所有数据
        if (err) throw err;
        // console.log(result);
        res.send(result);
        db.close();
    });
});
});
  
app.listen(1080);

至于怎样创建数据库，在下载好mongodb之后，配置好环境，通过控制台一些简单的命令百度上有（菜鸟驿站）可以简单地配置一个。

雕琢时光纸戆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajak 拉取json数据填充html

通过ajak方法访问文件，获取其中的数据，将其填充到HTML中 xhr.onreadystatechange = function(){ if(xhr.status == 200 && xhr.readyState == 4){ var result = JSON.parse(xhr.response) console.log(result)...
复制链接

扫一扫