使用Ajax修改和保存JSON文件中的数据 [英] Modify and save data in JSON file using Ajax

问题描述

首先，这是我的 .json 文件：

{           
    "ids": [1,2],
    "names": ["John Richards", "Doe Williams"],                     
    "skills": [ "Senior Software Engineer", "Junior Software Developer"]

}

这是我的ajax调用，用于显示对象中的每个名称。

And here's my ajax call to display each name from the object.

$.ajax({ 
    dataType: "json",
    url: "entries.json",
    success: function(data){
        for (var i = 0; i < data.names.length; i++){
            console.log(data.names[i]);
        }
    }
});

我有一个包含3个字段的表单和一个我用来提交新数据的按钮。问题是我无法修改该json文件并提交该数据。

I have a form with 3 fields and a button which I'm using to submit new data. The problem is that I can't modify that json file and submit that data.

$("#add").on("click",function(){
                var url = "entries.json";   

                //Form input
                var id = $("#empID").val();
                var fullName = $("#empFullName").val();
                var prof = $("#empProf").val();

                var entry = {   "ids":id, 
                                "names":fullName, 
                                "skills":prof 
                            };
                ....
                Ajax call for modification of the json file?!?!

修改的意思是基本上插入 id ， fullName 和教授进入json的相应字段，保存，新值追加。任何洞察力？我被卡住了。拉扯很好。怎么做我将数据推送到.json文件？如果我错过了提供任何importa请告诉我。我是ajax的新人。

What I mean by modify is to basically insert the id, fullName and prof into the corresponding field of the json and save it with the new values appended. Any insight? I'm stuck. Pulling is fine. How do I push data to the .json file? If I missed to provide anything important please let me know. I'm relatively new working with ajax.

提前致谢！

PS：我'如果有人想知道的话，我已经使用数据库制作了这个项目。

推荐答案

你不能只使用数据写入JSON文件浏览器中的JavaScript。但是在浏览器中使用JavaScript，您可以编写 Document.cookie 并写入 Window.localStorage 。

You cannot write to a JSON file using only JavaScript in the browser. But with JavaScript in the browser you can write Document.cookie and also write in the Window.localStorage.

在浏览器的localStorage中写道：

Writing in the localStorage of the browser:

// Form input
var id = $("#empID").val();
var fullName = $("#empFullName").val();
var prof = $("#empProf").val();

var obj = {
    "ids": id,
    "names": fullName,
    "skills": prof
};
localStorage.setItem('myJavaScriptObject', JSON.stringify(obj));

要从localStorage中检索对象，您可以执行以下操作：

And than to retrieve the object, from the localStorage, you can do:

var obj = JSON.parse(localStorage.getItem('myJavaScriptObject'))

您可以做的其他事情是使用服务器端技术在后端创建服务，如：NodeJS，Ruby on Rails，PHP，JAVA等......来处理在JSON文件中写入数据。

Other thing you can do is to create a service in the backend with a server-side technology like: NodeJS, Ruby on Rails, PHP, JAVA, etc... to handle the writing data in the JSON file.

• 然后从浏览器中创建 POST 请求将表单输入数据发送到服务的端点，数据可以保存到JSON文件中。

• And then from the browser, making a POST request that sends the form inputs data to the endpoint of your service, the data can be saved into the JSON file.

希望这会有所帮助。

这篇关于使用Ajax修改和保存JSON文件中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！