在重新加载的页面中使用Ajax调用的问题

Question

我是一名使用jquery和jquery mobile编写网站的新手。这将使用jquery ajax以JSON文件的形式加载一组问题，然后用户处理问题。首次打开时，页面使用如下代码成功打开2个JSON文件：

function loadJSON（keytoload）{

$.ajax({
    url: keytoload,
    dataType: "json",
    async: false,
    success: function (keyloaded)   {
                                     dataset=keyloaded;
                                     },
    error: function (request,error) {
                                    alert('Error has occurred please try again!');
                                    }
});        
}

我发现async必须设置为false才能生效。如果async为true，则显示的页面不包含JSON文件中的数据。

用户完成一系列步骤后，会加载一个新的JSON文件来替换第一个，这通常可以正常工作。但是，重新加载页面是不稳定的。它在Windows上的Firefox / Chrome中运行良好，但如果在Android Chrome上加载时完成页面刷新则会引发错误。所以我认为我的代码中存在问题。

我有更好的方法吗？

Answer 1

这里的问题是因为你没有正确使用ajax。您不知道从服务器返回结果需要多长时间。

这里的正确架构将是：

1. 在启动ajax之前显示加载div。
2. 成功时，请在页面中添加问题。
3. 下次显示再次加载。
4. 成功呈现新内容。

设置成功变量是错误的;成功时，您将根据后端的值呈现内容。也不建议以同步方式使用ajax，因为它可以阻止脚本。