使用 jquery 将新对象添加到 Json 文件答案

【问题标题】：Adding new object to Json file with jquery使用 jquery 将新对象添加到 Json 文件
【发布时间】：2018-01-21 22:50:54
【问题描述】：

我有一个包含一些数据的简单 json 文件。例如：

{ "id": 1,
    "name": "Porsche",
    "type": "911", 
    "price": "135000", }`

我必须使用这些输入（名称、类型、价格）创建一个 html 表单，如果用户单击提交按钮，它会将新对象添加到 json 文件中。

只使用jquery、js和html就可以吗？

【问题讨论】：

标签： jquery html json forms

【解决方案1】：

如果您使用 apache 之类的东西托管您的网站，那么仅使用 html 和 js 就无法将数据保存在服务器端。为此，您将需要某种后端逻辑。例如，这可以通过 PHP 来完成。如果你使用 PHP，下面的代码会做你想做的事：

<?php


   $myFile = "data.json";
   $arr_data = array(); // create empty array

  try
  {
       //Get form data
       $formdata = array(
          'id'=> $_POST['id'],
          'name'=> $_POST['name'],
          'type'=>$_POST['type'],
          'price'=> $_POST['price']
       );

       //Get data from existing json file
       $jsondata = file_get_contents($myFile);

       // converts json data into array
       $arr_data = json_decode($jsondata, true);

       // Push user data to array
       array_push($arr_data,$formdata);

       //Convert updated array to JSON
       $jsondata = json_encode($arr_data, JSON_PRETTY_PRINT);

       //write json data into data.json file
       if(file_put_contents($myFile, $jsondata)) {
            echo 'Data successfully saved';
        }
       else 
            echo "error";

   }
   catch (Exception $e) {
            echo 'Caught exception: ',  $e->getMessage(), "\n";
   }

?>

除此之外，您还必须创建一个 html 表单：

<html>
   <head>
   </head>
   <body>
      <form action="save.php" method="POST">
         <input type="text" name="name"/>
         <!-- INSERT YOUR HTML-INPUTS HERE -->
      </form>
   </body>
</html>

如果你还不熟悉 PHP，看看这个：https://www.w3schools.com/php/php_intro.asp

【讨论】：

非常感谢您的回答，我和我的表弟正在尝试创建一个测试网站。我们讨论过，我会创建前端，他会做后端。我不确定谁必须做这部分。