Question

这让我头疼的是最后一小时。基本上我检查localStorage以查看我是否有JSON字符串的缓存版本。如果我这样做，我加载它并将其转换回JSON对象。如果没有缓存版本，我使用Ajax并从服务器获取JSON对象。

无论哪种方式，在我拥有我的JSON对象之后，我调用一个parseDirectory函数来迭代我的JSON数据并创建我的html。解析后，它会将HTML附加到我的页面。我已经测试了两种方法，它们都成功地创建了我的HTML ..所以我知道我的JSON数据是好的。我加载了JSON数据的缓存版本并在JSONLint中运行它并且它是有效的。

奇怪的是，当我加载Cached JSON对象时，jQuery追加函数不起作用。当我使用Ajax调用下载它时 DOES 工作。这是代码

function loadPhoneList()

    //clearCache("Directory");

// Check if we have a cached version available

    if (isJSONCached("Directory")==true)
    {
        // We have a cached version of this module. Let's load that up
        var JSONobj = loadCachedJSON("Directory");
        parseDirectory(JSONobj);
    }
    else
    {
        $.ajax({
            dataType: 'jsonp',
            jsonp: 'jsonp_callback',
            url: 'http://www.myserver.com/directory.php',
            data: 'cname=' + customername,
            success: function (data)
            {
                // Cache this new JSON info
                cacheJSON("Directory", data );

                // Parse the received JSON data
                parseDirectory(data);

            },
            error: function (errormsg)
            {
                alert(errormsg);
            }
        });
    }

    // Parse the JSON and create our content
    function parseDirectory(JSONobj)
    {
        var model_list = '';

        for (var i=0;i<JSONobj.directory_data.length;i++)
        {
            model_list += '<li class="item item-text-wrap"><p>' + JSONobj.directory_data[i].Name + '</p><p>' + JSONobj.directory_data[i].Number + '</p></li>';
        }

        alert(model_list);

        $("#directoryList").append(model_list);
    }
}

HTML

<div class="content-nopadding" >

    <div class="list">
        <div class="item item-divider">
            <center>Phone Directory</center>
        </div>

        <ul class="list" id="directoryList">
            <li class="filler"></li>
        </ul>

    </div>          

</div>

**编辑。添加了cacheJSON代码**

// Used to store a cached version of a JSON string in localStorage by Key value
function cacheJSON( key, json )
{
    // Need to convert the JSON object to a string so we can store it
    var JSONtoStr = JSON.stringify(json);

    window.localStorage.setItem(key,JSONtoStr);
}

Answer 1

在JSFiddle中，一切都很有效。因为我在移动设备上开发它，原因是在JS运行之前没有加载DOM。我添加了一个onDeviceReady事件处理程序来解决问题。

感谢您的期待！

在localStorage JSON解析之后添加Jquery附加列表

1 个答案: