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

时间:2014-09-16 17:53:32

标签: jquery ajax json post

我找到了无数关于如何使用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": ""
     }]

2 个答案:

答案 0 :(得分:4)

因此您需要使用服务器端脚本语言。在这种情况下,我们将使用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);
    }

我希望我没有遗漏任何东西。祝你好运。

答案 1 :(得分: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
祝你好运