在 JavaScript 中编辑外部 JSON 文件

JavaScript是一种广泛使用的编程语言，可以用于编写交互式网页和应用程序等。同时，JSON格式的文件也是一种常见的数据交换格式。因此，掌握如何在JavaScript中编辑外部JSON文件是程序员需要掌握的重要技能。在本文中，我们将介绍如何使用JavaScript来打开、编辑和保存外部JSON文件。

打开外部JSON文件

使用JavaScript中的XMLHttpRequest对象可以打开外部JSON文件。以下是一个简单的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onload = function() {
  if (this.status === 200) {
    var data = JSON.parse(this.response);
    console.log(data);
  }
};
xhr.send();

上述代码会向服务器发送一个HTTP GET请求，以获取名为data.json的外部JSON文件。一旦请求成功，我们就可以使用XMLHttpRequest对象的response属性来访问文件数据。但是，response属性返回的数据类型是字符串，需要将其转换为JavaScript对象。这里我们使用JSON.parse()方法将字符串转换为一个JSON对象。最后，我们用console.log()方法输出了这个JSON对象。

编辑外部JSON文件

一旦成功打开外部JSON文件并转换为JavaScript对象，我们就可以轻松地编辑它了。例如，我们可以添加、修改或删除数据。以下是一个示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onload = function() {
  if (this.status === 200) {
    var data = JSON.parse(this.response);
    data.name = 'Tom';
    data.age = 25;
    console.log(data);
  }
};
xhr.send();

上述代码会将data.json文件中的name属性修改为'Tom'，并在JavaScript对象中添加了一个新的age属性并将其设置为25。最后，我们使用console.log()方法输出了修改后的JSON对象。

保存外部JSON文件

一旦我们编辑了外部JSON文件，我们也需要将这些更改保存到磁盘中。要保存更改，我们可以使用XMLHttpRequest对象向服务器发送HTTP POST请求。以下是一个示例：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'save.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
  if (this.status === 200) {
    console.log('File saved!');
  }
};
var data = { name: 'Tom', age: 25 };
xhr.send('data=' + JSON.stringify(data));

上述代码会将编辑后的JSON对象data发送到名为'save.php'的服务器端脚本。在服务器端，脚本可以将数据保存到磁盘中。为了正确传输数据，我们还需要设置request headers。在本例中，我们使用XMLHttpRequest对象的setRequestHeader()方法设置Content-Type header，告诉服务器我们正在发送JSON格式的数据。最后，我们使用console.log()方法输出了保存成功的消息。

小结

在JavaScript中编辑外部JSON文件并不困难，但是需要掌握一些技巧。我们可以使用XMLHttpRequest对象来打开、编辑和保存外部JSON文件。编辑JSON文件的过程中，我们需要将JSON字符串转换为JavaScript对象，编辑完毕后将其转换回JSON字符串。同时，为了正确地保存JSON数据，我们还需要设置正确的request headers。