Javascript 如何使用php保存和显示动态添加到json的数据？

我有一个简单的块，用户可以在单击时添加多个按钮，现在我使用push将这些按钮添加到json中，现在我想使用PHP将添加的按钮保存到json文件中

根据Arleigh Hix更新

我的json看起来像这样

    var movies = [{
      "title": "travel",
      "left": 201,
      "top": 209,
      "movieid": "10",
      "movie_url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
      "buttons": [{
        "left": 81,
        "top": 51,
        "start_time": 1,
        "end_time": 2,
        "buttonid": "10_1",
        "btn_url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
      }]
    },
    {
      "title": "ecommerce",
      "movieid": "20",
      "movie_url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
      "buttons": [{
        "left": 0,
        "top": 0,
        "start_time": 1,
        "end_time": 2,
        "width": '200',
        "height": '60',
        "buttonid": "20_1",
      }]
    }
  ]

下面是用于添加按钮的HTML块

 <div id="layers-container" style="width: 375px;">
      <div class="layer"></div>
 </div>

这是js

      $("#add-button").on("click", function(index){

                        var layer = $("<div class='layer'><div class='content-layer'></div></div");

                        $("#layers-container").append(layer);
                        var clickarea = $("<div class='clickarea'></div>");
                        $(".caption-content").append(clickarea);                       
                        $('.content-layer').each(function(index){
                                var value = index + 1;     
                                $(this).attr('id','contentLayerID' + value);
                        });

                        $('.clickarea').each(function(index){
                                var value = index + 1;    
                                $(this).attr('id','clikckAreaID' + value);
                                for (var a = 0; a < movies.length; a++) {
                                        for (var j = 0; j <movies[a].buttons.length; j++) {
                                                movies[j].buttons.push({
                                                        left: 20,
                                                        top: 20,
                                                        buttonid:clickarea.attr('id', 'clickAreaID', value)
                                                });

                                  };

                                }

                                    $.post('save_to_json.php', {movies:movies}, function(data, textStatus){
                                        console.log(textStatus, data);
                                    });
                        });

   })

这是我启动的php文件：将_保存到_json.php

   <?php
if(isset($_POST['movies'])){
    $movies = json_decode($_POST['movies']);
    // do whatever checks you need on $movies to verify valid data

    $success = file_put_contents("data.json", json_encode($movies));
    if($success === false){
        echo "Failed to write data to file";
        die();
    }else{
        echo "$success bytes were written to the file";
        die();
    }
}

$data=file_get_contents("data.json");
$result=json_decode($data);
?>

我得到了这个错误

未捕获类型错误：非法调用 在e jquery.min.js:4 在Vc jquery.min.js:4

老实说，我是PHP新手，我不知道下一步该怎么办

---

我需要做什么才能得到我想要的？

请更详细地描述一下你正在尝试做什么，这样社区可以更好地帮助你

要在PHP中将JSON字符串写入文件，只需执行以下操作：

<?php
file_put_contents("file.json", $_POST['movies']);

假设您首先使用Javascript对数组进行JSON编码，然后使用HTML表单将JSON字符串发布到PHP脚本中。

在执行完。每个函数后，将更新的JSON发送到PHP文件：

在php文件中，检查并从$\u POST检索数据

然后保存数据

---

我已经更新了我的问题并添加了更多的代码，你能用你的建议检查我是否做得对吗？我现在有一些小问题。我得到了这个错误：jquery.min.js:4 Uncaught TypeError:非法调用对不起，我可能有sytax错误未测试的代码，但这是基本流程。阅读文档并将原则应用到代码中。我现在正在检查，我已经按照您的建议进行了更新。检查它是否是我实现的正确方式。我遇到了错误，我根据堆栈溢出尝试了不同的组合，但没有任何效果：对于var j=0，在<和movies之间缺少一个空格；J

$("#add-button").on("click", function(index){
    ...

        $('.clickarea').each(function (index) {
            ...        
        });

        let jsonString = JSON.stringify({movies:movies});
        $.post('myPhpFileURL', jsonString, function(data, textStatus){
            console.log(textStatus, data);
        });

    });

<?php
if(isset($_POST['movies'])){
    $movies = json_decode($_POST['movies']);
    // do whatever checks you need on $movies to verify valid data

    $success = file_put_contents("file.json", json_encode($movies));
    if($success === false){
        echo "Failed to write data to file";
        die();
    }else{
        echo "$success bytes were written to the file";
        die();
    }
}

$data=file_get_contents("file.json");
$result=json_decode($data);
?>