使用JQuery简单保存到JSON文件

时间:2014-01-06 10:39:47

标签: jquery ajax json post

我已经尝试了所有可以实现的示例,但我不能简单地将JSON数据保存到主机上的JSON文件中。我想从一个简单的保存方法开始,所以我有一个地方可以开始。

这是我得到的: 基本上我的 index.html 中有一个按钮,点击该按钮应该将数据保存到我的general.json文件(与index.html相同的位置)。

<button id="savebtn">Save</button>

myscript.js 中使用id选择器,我这样做:

$('#savebtn').click(function() {
                var saveit = $('#calendar').fullCalendar( 'clientEvents');

        var eventsholded = [];

    $.each(saveit, function(index,value) {
        var event = new Object();
        event.id = value.id;            
        event.start = value.start;
        event.end = value.end;
        event.title = value.title;
    event.allDay = value.allDay
        eventsholded.push(event);
    }); 
    $.ajax
    ({
        type: "GET",
        dataType : 'json',
        async: false,
        url: 'general.json',
        data: JSON.stringify(eventsholded),
        success: function () {alert("Thanks!"); },
        failure: function() {alert("Error!");}
    });

如您所见,我想存储来自fullcalendar的事件。这不是很相关,因为它一直工作到这一点。 如果我在屏幕上提醒JSON.stringify(eventsholded),您会看到:

[{"start":"2014-01-07T08:30:00.000Z","end":"2014-01-07T12:30:00.000Z","title":"Pumukli Pista","allDay":false},{"start":"2014-01-11T13:30:00.000Z","end":"2014-01-11T18:30:00.000Z","title":"Fanic Catalin","allDay":false}]

现在这正是我想要以简单,快速,可能不安全但非常简单的方式保存到服务器的内容。这样我就可以开始理解这是如何工作的,只是为了让它成为现实。我的general.json文件。

$.ajax部分在我的上述代码中没有任何作用。甚至没有警告“错误”。其余代码按预期工作。

安全性现在并不重要。我只是想了解它是如何运作的。

对于有完整示例的任何帮助或有用链接,我将不胜感激。谢谢!

1 个答案:

答案 0 :(得分:23)

$.ajax不会保存json文件,您需要将url属性指向服务器端脚本,即http://your.host/save_json.php,这将创建general.json和把输出写在上面。类似的东西:

<强> PHP:

<?php
$myFile = "general.json";
$fh = fopen($myFile, 'w') or die("can't open file");
$stringData = $_GET["data"];
fwrite($fh, $stringData);
fclose($fh)
?>

您还需要将data调用中的ajax属性更改为data: {data: JSON.stringify(eventsholded)},以便为GET变量指定可从PHP检索的正确名称:

<强> JQUERY

$.ajax
    ({
        type: "GET",
        dataType : 'json',
        async: false,
        url: 'http://your.host/save_json.php',
        data: { data: JSON.stringify(eventsholded) },
        success: function () {alert("Thanks!"); },
        failure: function() {alert("Error!");}
    });