JavaScript使用ajax读取txt文件内容代码详解

    网站开发中对于数据的读取和展示可以说是必不可少的操作,在前端开发中如何通过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内容的操作流程。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!