如何使用jQuery将数据更新到外部JSON文件?

时间:2019-05-21 00:27:44

标签: javascript jquery json

我有data.json文件,但无法将数据保存到data.json文件中。我有产品阵列

{ 
"products": [
      {
        "first": 0,
        "last": "Ocean Blue Shirt",
        "des": "Ocean blue cotton shirt with a narrow collar and buttons down the"
      },
      {
         "id": 1,
         "name": "orange",
         "description": "Ocean blue cotton shirt with a narrow collar and buttons down"

       }
      ]
}

下面是我的jquery代码。我正在使用jquery函数$ .getJSON()

$(document).ready(function(){

    $.getJSON("data.json", function(data){

            data.products.push({
                first:'Mike',
                last:'jule',
                des:'1920-1932'
            });

            JSON.stringify(data);
    });
});

当我尝试将数据保存到外部json文件名data.json中时,文件没有更新。

1 个答案:

答案 0 :(得分:1)

您是否要保存持久性数据?请记住,jQuery是客户端-因此,您会将这些数据保存在浏览您的网站的个人计算机上。

您可能正在寻找的是某种API,您可以将数据发送到(从客户端),以便可以将其保存在服务器上...或者将此数据客户端保存在Cookie /会话存储/本地存储..

我不确定保存客户端数据有多么容易。你写什么路径?如果用户在电话上浏览怎么办?如果它们在Ubuntu或Windows上该怎么办?所有这些路径都会不同。

话虽如此,我写了一个小例子,它使用jQuery自动下载JSON数据。这也许可以帮助您实现您想要的工作。

[Live CodePen demo to show you how this works..]

HTML:

<h3 id="title">The JSON data below will be downloaded in <span id="count"></span> seconds</h3>

<pre id="to-download">
{
  "some": "jsonData",
  "for": {
    "you": "to",
    "down": "load"
  }
}
</pre>

jQuery:

function download(filename, text) {
  const e = document.createElement("a");
  e.setAttribute(
    "href",
    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  );
  e.setAttribute("download", filename);
  e.style.display = "none";
  document.body.appendChild(e);
  e.click();
  document.body.removeChild(e);
}

function timer(seconds, callback) {
  var n = seconds;
  $("#count").html(n);
  function countDown() {
    n--;
    if (n > 0) { setTimeout(countDown, 1000); }
    $("#count").html(n);
    if (n === 0) { callback(); }
  }
  countDown();
}


timer(10, () => { 
  const html = $("#to-download").html();
  const text = JSON.stringify(JSON.parse(html));
  const filename = "data.json";
  download(filename, text);
  $("#title").html("Done!");
});