Ajax读取数据示例

最新推荐文章于 2021-08-05 23:30:23 发布

Walnutt

最新推荐文章于 2021-08-05 23:30:23 发布

阅读量97

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_44849953/article/details/116100642

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客展示了如何利用Ajax技术从服务器获取JSON数据，并动态地在网页上展示这些数据。通过创建一个按钮触发Ajax请求，当用户点击按钮时，会加载一个名为'ajax_learn_info.json'的文件。接收到数据后，将JSON内容解析为JavaScript对象，并绘制到表格中。示例中包含了HTML、CSS和JavaScript代码，以及一个简单的Node.js服务器，用于返回JSON文件。

摘要由CSDN通过智能技术生成

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<style type="text/css">
			#p1{
				background-color:lightblue;
				text-align:center;
				font-size:50px;
			}
			#table1{
				width:80%;
				margin:auto;
			}
		</style>
	</head>
	<body>
		<p id="p1">ajax</p>
		<button id="button1" onclick="myFunction()">读取数据</button>
		<table id="table1" border="1">
			<tr>
				<th>a</th>
				<th>b</th>
				<th>c</th>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		let http="";
		let text;
		function drawtable(list){
			for(var a of list){
				http+="<tr>"+
					"<td>"+a.first+"</td>"+
					"<td>"+a.second+"</td>"+
					"<td>"+a.third+"</td>"+
					"</tr>"
			}
			let table = document.getElementById("table1");
			let temp = table.innerHTML;
			table.innerHTML = temp+http;
		}
		function loadjson(file,cfun){
			text=new XMLHttpRequest();
			text.onreadystatechange = cfun;
			text.open("Get",file,true);
			text.send();
		}
		function myFunction(){
			loadjson("ajax_learn_info.json",function(){
				if(text.readyState==4&&text.status==200){
					let list=JSON.parse(text.responseText);
					drawtable(list);
				}
			})
		}
	</script>
</html>

json

[
	{
		"first":"aaaaaaaa",
		"second":"bbbbbbbbbb",
		"third":"ccccccccccc"
	},
	{
		"first":"aaaaaaaa",
		"second":"bbbbbbbbbb",
		"third":"ccccccccccc"
	}
]

js server

var http = require("http");
var fs = require("fs");
var url = require('url');
 
// 创建服务器
http.createServer( function (request, response) {  
//   var data = fs.readFileSync('c:\\users\\dell\\desktop\\test.html');
   // 解析请求，包括文件名
   var pathname = url.parse(request.url).pathname;
      // 输出请求的文件名
   console.log("Request for " + pathname + " received.");
      // 从文件系统中读取请求的文件内容
   fs.readFile(pathname.substr(1), function (err, data) {
      if (err) {
         console.log(err);
         // HTTP 状态码: 404 : NOT FOUND
         // Content Type: text/html
         response.writeHead(404, {'Content-Type': 'text/html'});
      }else{             
         // HTTP 状态码: 200 : OK
         // Content Type: text/html
         response.writeHead(200, {'Content-Type': 'text/html'});    
                  // 响应文件内容
         response.write(data.toString());        
      }
      //  发送响应数据
      response.end();
   });   
}).listen(8888, "10.18.100.30");

// 终端打印如下信息
console.log('Server running at http://10.18.100.30:8888/');

Walnutt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax读取数据示例

html<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <style type="text/css"> #p1{ background-color:lightblue; text-align:center; font-size:50px; } #table1{ width:80%; margin:auto; }
复制链接

扫一扫

专栏目录