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

一尘不染

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

ajax

我发现了无数关于如何使用jQuery和Ajax从json文件中检索数据的教程，但是没有关于如何将数据发布到json文件中的* 教程。 *。
如果有人可以向我展示或给我发送有关如何执行此操作的小脚本，那就太好了。我到处都在搜索如何执行此操作，但是没有运气。我见过有人这样做的例子，但他们似乎忘记了分享我没有看到的重要信息。我使用ajax检索数据json文件没有问题。如果有人可以告诉我我是否忘记某件事或做错了什么，那将是很好的。如果有人可以向我发送工作文件，以便我可以对工程师进行反向工程并了解如何做，我将不胜感激。我想将值从$
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": ""
     }]

阅读 549

2020-07-26

共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);
    }

我希望我不会错过任何东西。祝好运。

2020-07-26