以JSON格式保存和检索数据

时间:2017-11-27 19:50:03

标签: javascript json ajax post get

我有一个带有输入的HTML文件,用户可以输入他的名字,另一个用户可以输入他的年龄,然后是按钮和列表:

<p>name: <input type="text" id="name"></p>
<p>drink: <input type="text" id="age"></p>
<button id="post">Submit</button>
<ul id="output"></ul>

现在我希望将值保存在JSON文件中,如下所示:

[
  {
    "name": "Person 1",
    "age": 54
  },
  {
    "name": "Person 2",
    "age": 27
  }
]

我有一个JavaScript文件,其中我使用ajax和jQuery:

$(function(){

  var $output = $('#output');
  var $name = $('#name');
  var $age = $('#age');
  $.ajax({
    type: 'GET',
    url: 'data.json',
    success: function(data){
      data = JSON.parse(data);
      $.each(data, function(i,item){
        $output.append('<li>name: '+item.name+', age: '+item.age+'</li>');
      });
    },
    error: function(){
      alert('error loading items');
    }
  });

  $('#post').on('click',function(){

    var object = {
      name: $name.val(),
      drink: $drink.val()
    }

    $.ajax({
      type: 'POST',
      url: 'data.json',
      data: object,
      success: function(newItem){
        $output.append('<li>name: '+newItem.name+', age: '+newItem.age+'</li>');
      },
      error: function(){
        alert('error saving items');
      }
    });

  });

});

但是如果我在服务器上运行代码,我会收到此错误:

SyntaxError: JSON Parse error: Unexpected identifier "object"

我检查了JSON代码,但找不到错误。如果我在本地主机上运行代码,则不会收到错误消息,但这些值未定义且无法保存在JSON文件中。

0 个答案:

没有答案