网站开发中对于数据的读取和展示可以说是必不可少的操作，在前端开发中如何通过js来读取文件的内容呢？如读取txt文件、json文件中的内容。

    本就来详细讲解如何使用原生js读取文件内容、基于jq读取文件内容。

一、创建需要使用的txt文件及json文件

    1.1、创建需要解析的txt文件，如1.json、1.txt

二、原生js读取txt文件或json文件

function readTxt() {
	var xhr = new XMLHttpRequest();
	xhr.open("get", "1.json", true);
	// xhr.open("get", "1.txt", true);
	xhr.send();
	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200) {
			console.log(xhr);
			console.log(xhr.responseText);
		} else if(xhr.status == 404) {
			console.log(xhr.status);
		}
	};
}

三、基于jq使用ajax读取文件

    3.1、引入jq文件

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

    3.2、ajax请求代码

$.ajax({
	url: "1.txt",
	success: function(data, status) {
		console.log(arguments)
		console.log(data)
	},
	error: function(data, status) {
		console.log(arguments)
	}
});

四、基于jq使用$.getJSON读取json文件

    4.1、代码详解

$.getJSON("1.json",function(e){
	console.log(e)
});

以上是常见使用ajax读取txt文本或ajax读取json内容的操作流程。