Question

我有一个 JSON 对象，如下所示：

var info = [
  {
    "place": "Turkey",
    "username": "jhon"
  },
  {
    "place": "Dubai",
    "username": "bruce"
  },
  {
    "place": "Italy",
    "username": "Wayne"
  }
];

我有一个 HTML 表单，接受地点和用户名：

<html>
  <body>
    <form onsubmit="addJSON();">
      Place:<br>
	  <input type="text" id="placeval" value="place">
	  <br>
	  username<br>
	  <input type="text" id="usernameval" value="username">
	  <br><br>
	  <input type="submit" value="Submit">
    </form> 
  </body>
</html>

我希望JavaScript能够从两个输入框（values和place）中读取username并将它们附加到现有列表{{1}我的info中存在的。有关如何与之相处的任何建议？非常感谢！

Answer 1

function addJSON() {
    var username = document.getElementById('usernameval').value;
    var place = document.getElementById('placeval').value;
    var newObject = {
        "place": place,
        "username": username
    };
    info.push(newObject);
}

小提琴：http://jsfiddle.net/dpv7L8ks/

或者如果小提琴不适用于codepen：http://codepen.io/anon/pen/OVrVEV 检查控制台以查看更新的info此处

Answer 2

   var place = document.getElementById("placeval").value,
       username = document.getElementById("usernameval").value,
       infoLength = info.length;

       info[infolength] = {
                    "place": place ,
                     "username": username
        }

Answer 3

这可以使用简单的javaScript来完成。没有必要使用jQuery就行了。

addJSON（）方法中的第1行创建一个对象并将文本框值分配给对象属性。第2行使用push（）方法在info数组中推送新创建的对象。

    var info = [{"place": "Turkey","username": "jhon"},{"place":"Dubai","username":"bruce"},{"place":"Italy","username":"Wayne"}];

    function addJSON(){
        object = { "place" : document.getElementById("placeval").value, "username" : document.getElementById("usernameval").value};
        info.push( object );
        console.log( info );
    }

</script>

如何从输入框中读取数据并存储在JSON文件中？

3 个答案: