Question

var ColorHue = {
    pullColor: function(){
        var promise = $.Deferred();
        $.ajax ({
            url: 'ajax/color/Red.json',
            dataType: 'json',
            type: 'get',
            success: function(result){
                promise.resolve(result);
            }
        });
        return promise;
    } 
};

$('#colorHue').on('click', '#colorEnter', function(event){
    event.preventDefault();
    var nowColor = ColorHue.pullColor();
    nowColor.done(function(result){
        $('#colorDepot').append(result);
    });
});

我有一个带有变量的js文件和返回promise对象的方法，该对象将在“click”事件中调用。因此，如果文件是一个html，我可以毫无问题地将它附加到DOM，但由于某种原因，当文件是json时，此代码会抛出错误。我的json文件存储在本地，标题为Red.json，并说内容为：

{
    'test': 'yes',
    'work': 'Maybe',
    'value': '0'
}

我希望专家们能够提供一些见解。在此先感谢您的帮助！

Answer 1

当文件是json时，然后将它附加到div上做类似的事情 $（ '＃colorDepot'）附加（result.test）;

Answer 2

尝试

Red.json（双引号）

{
    "test": "yes",
    "work": "Maybe",
    "value": "0"
}

JS

var ColorHue = {
    pullColor: function(){
        // jquery ajax returns promise object
        return $.ajax ({
            url: 'ajax/color/Red.json',
            dataType: 'json',
            type: 'GET'
        });
    } 
};

$('#colorHue').on('click', '#colorEnter', function(event){
    event.preventDefault();
    var nowColor = ColorHue.pullColor();
    // process jquery ajax promise object
    nowColor.done(function(result) {
        // append `result` keys and values to document
        $.each(result, function(k, v) {
            $('#colorDepot').append(k + ":" + v + "<br>");
        })
    });
});

jsfiddle http://jsfiddle.net/guest271314/ds57f3xa/

通过ajax请求拉取本地json数据文件

2 个答案: