javascript - 将 JSON 字符串传递给 PHP 并推送到数组

Question

这里是菜鸟。我查了又查，还是一无所知。

我正在为 Google map API 制作一系列标记/信息窗口。目前，我已成功从外部 JSON 文件加载标记。 JSON 数据如下所示:https://codedump.io/share/5XUwRzOFvREi/1/json-array路径./json/Markers

{"Markers": [
{
  "title" : "Meow Monestary",
  "position" : {
    "lat" : 40.5178,
    "lng" : -122.6438
  },
  "posterContact" : {
    "name" : "Mr Meowser",
    "email" : "MrMeow@Couch.com",
    "phone" : "(555)-202-3040",
    "private" : true
  },
  "type" : "myResidence",
  "ownerContact" : {
    "name" : false,
    "email" : false,
    "phone" : false,
    "private" : true
  },
  "description" : "Meow meow purrrrr.  Dogs are not my favorite but they are my second favorite.",
  "private" : true
},

我希望用户能够填写包含所有这些数据的表单，然后将新的标记对象推送到 JSON 数组中。到目前为止，我已经收集了表单，创建了一个 Javascript 对象，并将其转换为这样的 JSON 字符串...

function submitForm(){
        //place form data into array
        var formData = $("#shelterForm").serializeArray();

        //build the javascript object using the values in the array
        var shelter = {
          title:formData[0].value,
          position:{
            lat:formData[1].value,
            lng:formData[2].value
          },
          posterContact:{
            name:formData[3].value,
            email:formData[4].value,
            phone:formData[5].value,
            private:formData[6].value
          },
          type:formData[7].value,
          ownerContact:{
            name:formData[8].value,
            email:formData[9].value,
            phone:formData[10].value,
            private:formData[11].value
          },
          description:formData[12].value,
          private:formData[13].value
        };
  shelterString = JSON.stringify(shelter);
}

我确信有一种更简单的方法可以做到这一点。如果你愿意进入这个……太棒了!我的主要问题是，现在我有了 JSON 字符串，但不知道如何将其插入我的数组中。我想也许将字符串传递给 PHP 并写入文件，或者可能 ajax 允许这样做？

Answer 1

无论你是否使用AJAX，你仍然需要在服务器上有一个脚本来保存服务器端的数据。执行 AJAX 请求比常规表单 POST 更高级，因此我建议初学者不要使用它。

数据发送到 PHP 后，您需要存储它。最常见的方法是使用数据库，通常是 MySQL。发布表单后，您将从 $_POST 变量获取数据并将其作为新行存储在数据库中。然后，对于 JSON 文件，您可以将映射指向外部 JSON 文件的 PHP 脚本，而不是使用静态文件。然后，该脚本将查询数据库，使用与 javascript submitForm() 函数非常相似的代码将数据组装成关联数组，然后调用 json_encode() 进行转换数组转换为 JSON 字符串，然后打印。在客户端，您不再需要 submitForm() 函数。

如果您不想搞乱数据库，您可以使用服务器上的常规文件并让 PHP 脚本修改该文件。不过，这有点困惑，如果您的脚本中有错误或服务器在写入文件时断电，您可能会丢失所有数据，因此如果您有重要数据，我建议您还设置每日备份文件。此外，您必须采取特别的预防措施，不允许两个不同的人同时提交更新，因为两个进程同时写入同一个文件会导致垃圾数据。数据库的构建是为了能够更好地应对这些开箱即用的问题。

如果您想采用文件路径，您可能仍然希望将 JSON 的创建移至 PHP 中。您的 JavaScript 依赖于表单元素的确切索引，并且难以阅读和维护。在 PHP 中，你会得到类似的东西:

$shelter = [
      'title' => $_POST['shelter_title'],
      'position' => [
        'lat' => $_POST['shelter_latitude'],
        'lng' => $_POST['shelter_latitude']
      ],

$_POST 键是表单元素中的名称属性，这比使用索引号更容易维护，如果您添加或删除表单字段，则必须重新编号。

然后，您需要锁定 json 文件以确保两个进程不会尝试同时更新它

if (!flock($json_filename,LOCK_EX)) {
  die('We are having trouble updating our records. Please try again later.');
}
//Now nobody else can write to the file until the script finishes or calls flock($json_filename, LOCK_UN) to release the lock

然后，我们加载旧的 JSON 文件，并使用新记录更新它:

$old_json = file_get_contents($json_filename); //get JSON data as string
$old_data = json_decode($old_json); //convert JSON data into PHP array
$new_data = array_push($old_data['Markers'], $shelter); //add the new shelter to PHP array
$new_json = json_encode($new_data); //convert the PHP array back to a JSON string
file_put_contents($json_filename, $new_json); //write the string to the file
//json file is updated, so now you can display a message, or redirect the user to a new page with header('Location: foo')

我尚未测试此代码，因此在尝试此操作之前请备份您的 JSON。