如何通过ajax请求加载JSON时停止锁定浏览器？

Question

我遇到的问题是导致下拉列表和浏览器锁定，直到提供了ajax请求。我知道对于JSON Ajax请求应该将ASYNC设置为False，所以我很感激有人可以帮我修改代码以防止在收到Ajax请求之前锁定下拉列表和页面。

您可以在此处查看：

http://bit.ly/16QN1lA

我加了5秒。睡眠到data.php文件，使问题更加明显。

Answer 1

让我建议采用不同的方法。

$.get(url, function(res){
 data = JSON.parse(res);
 $(data).each(function(k,v){ 
  $('#makes').append( html )
 }
}

Answer 2

您使用异步AJAX收到错误的原因是该函数会立即返回，这是在您从服务器获得响应之前。所以你在垃圾数据上调用JSON.parse()，导致你看到的错误。

解决方案是在从服务器获得响应之后进行解析：

if(year !=""){
    //Get vehicle json and store into vehicles_json
    getJson(
        js_base_url,
        function(makes_json) {
             //Set makes equal to makes dropdown
            var makes = $("#make");
            //empty dropdown
            makes.empty();

            var makes_array = [];
            //loop through makes_json json
            $.each(makes_json, function() {
                    makes_array.push('<option value="', this.model_make_display, '">', this.model_make_display, '</option>');
            });
            makes.html(makes_array.join(''));
         }
    );
}

function getJson(url, callBack) {
  $.ajax({
     type: 'GET',
     url: url,
     dataType: 'json',
     global: false,
     success: function(json_response) {
         callBack(json_response);
     }
 });
}

Answer 3

我决定使用jQuery $ .getJSON，它可以在不锁定浏览器的情况下工作。

$.getJSON( "test.php", function( json ) {
  console.log( "JSON Data: " + json);
 });

http://api.jquery.com/jQuery.getJSON/