如何使用 jquery/ajax 将数据发送到 json 文件答案

【问题标题】：How to send data to json file using jquery/ajax如何使用 jquery/ajax 将数据发送到 json 文件
【发布时间】：2014-09-16 17:53:32
【问题描述】：

我找到了无数关于如何使用 jQuery 和 ajax 从 json 文件中检索数据的教程，但没有找到关于如何将数据发布到 json 文件的教程。如果有人可以向我展示或向我发送有关如何执行此操作的小脚本，那就太好了。我到处搜索如何做到这一点，但没有运气。我见过有人这样做的例子，但他们似乎忘记分享我没有看到的重要信息。使用 ajax 检索数据 json 文件没有问题。如果有人能告诉我我是否忘记了什么或做错了什么，那就太好了。如果有人可以向我发送一个工作文件，我将非常感激，这样我就可以对 ir 进行逆向工程并了解如何去做。我想将 $firstName 和 $caption 的值发送到 json 文件。我知道这对其他人来说可能看起来很愚蠢，但我厌倦了所有的搜索并且没有得到任何直接的答案。

这就是我所拥有的。

      getImages: function(){
        var $firstName = $(".name"),
            $caption = $(".caption");
        var object = {
            name: $firstName.val(),
            caption: $caption.val()
        }
        $.ajax({
            type: 'POST',
            data: object,
            url: 'images.json',
            success: function(data){
                console.log("KILLER");
                var count = 0;
                $.each(data, function(i, imgSlide){
                    count ++;
                    //console.log(result.sliderImages[i].url[0].thumb);
                    var imageEl = "<img src='"+imgSlide.url[0].thumb+"' alt='"+imgSlide.name+"'>";
                    var slide = "<li class='imageSlide' data-id='"+count+"'>"+imageEl+"</li>";
                    $("ul.imageGallery").append(slide).fadeIn();
                });
            },
            error: function(){
                console.log("Abort");
            },
            timeout: 3000,
            beforeSend: function(){

            },
            complete: function(){

            }
        });

    }

这是我的 JSON 文件

    [{
      "name": "Bootcamp",
      "url": [{
        "thumb": "img/ill-bootcamp.jpg",
        "med": "img/ill-bootcamp.jpg",
        "large": "img/ill-bootcamp.jpg"
            }],
      "caption": "Lifetime Fitness",
      "ID": ""
     },
     {
       "name": "Pinup Girl",
       "url": [{
            "thumb": "img/ill-pinup.jpg",
            "med": "img/ill-pinup.jpg",
            "large": "img/ill-pinup.jpg"
             }],
      "caption": "Illustration",
      "ID": ""
     },
     {
       "name": "SixDitch",
       "url": [{
             "thumb": "img/web-sixditch.jpg",
             "med": "img/web-sixditch.jpg",
             "large": "img/web-sixditch.jpg"
             }],
       "caption": "SD MotorSports",
       "ID": ""
     }]

【问题讨论】：

您的意思是，发布数据并将其保存到 JSON 文件中？为此，您需要一种服务器端脚本语言，例如 php。
无法发布到无法执行的文本文件
这就是我的想法，我只是无法得到一个直接的答案。到了我愿意问这个愚蠢的问题并结束它的地步。谢谢你。当我看到这个关于使用 ajax 和 json 发布的视频时感到困惑，但他没有在他的视频中提到关于工作 php 的部分。

标签： jquery ajax json post

【解决方案1】：

因此您需要使用服务器端脚本语言。在这种情况下，我们将使用 PHP。

定义你的 json 对象后，你把它变成字符串并通过 post 将它发送到 php 文件。 PHP 将从那里获取它并将其编码为 JSON 对象。此 json 对象将使用 php 函数 file_put_contents() 保存到名为 my_json_data.json 的文件中。如果您想追加新内容而不是替换旧内容，请使用如下函数：

file_put_content('my_json_data.json', $jsonObject, FILE_APPEND);

JavaSrcipt：

var $firstName = $(".name"),
    $caption = $(".caption");
var object = {
    name: $firstName.val(),
    caption: $caption.val()
}

var params = JSON.stringify(object);

$.ajax({
    type: 'POST',
    data: params,
    url: 'save_to_json.php',
    success: function(data){
        // do something on success
    },
    error: function(){
        // do something on error
    }
});

PHP (save_to_json.php)：

    if (!isset($_POST['params']) && !empty($_POST['params'])) {
        $params = $_POST['params'];

        $jsonObject = json_encode($params);
        file_put_contents('my_json_data.json', $jsonObject);
    }

我希望我没有错过什么。祝你好运。

【讨论】：

感谢您抽出宝贵时间帮助我。我不确定他是否需要 php 来完成这个过程，现在我知道你需要它。我的问题很愚蠢，但很高兴我终于问了。
我很高兴能帮上忙。如果它解决了您的问题，请检查此答案是否已接受:)
@HristoEnev 我也尝试了您的解决方案来解决我的问题，并且它有效。但是，当写入 json 文件时，会有空格和 \ 符号。这个怎么处理？它似乎不是正确的 json 格式。

【解决方案2】：

有点不清楚...
客户端语言无法编写或编辑服务器上的某些内容
通过 AJAX（带或不带 jQuery）您只能读取数据或发送数据
这样您就可以将数据传递给 php 文件，然后通过 php 执行您想要执行的操作。
这是在 php 中处理文件的教程
http://www.w3schools.com/php/php_file_open.asp
这是另一个通过 AJAX 在 php 文件中获取传递数据的方法
http://www.w3schools.com/php/php_superglobals.asp
查看 $_GET 、 $_POST 、 $_REQUEST
祝你好运

【讨论】：