zoukankan      html  css  js  c++  java
  • 同时执行多个$.getJSON() 出现数据混乱的问题的解决

    $.getJSON()

    $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

    url是必选参数,表示json数据的地址;
    data是可选参数,用于请求数据时发送数据参数;
    success是可参数,这是一个回调函数,用于处理请求到的数据。

    json数据的一般格式如下(“{ }”中的为对象,“[ ]”中的为数组)

    getJSON有两种传值方式:1种是以字符串的形式;2种是以json对象的形式

    同时执行多个$.getJSON() 出现数据混乱的问题的解决

    在执行之前加$.ajaxSettings.async = false;    (同步执行)
    执行你的代码之后及时恢复为$.ajaxSettings.async = true; (异步执行)
    不然影响别的地方的需要异步执行的代码。

    $.ajaxSettings.async = false;
    $.getJSON(url, data, function(data){ });
    $.getJSON(url, data, function(data){ });
    $.getJSON(url, data, function(data){ });
    ......
    $.ajaxSettings.async = true;

    AjaxgetJSON比较:

    <script type="text/javascript"> 
            $(function () { 
                //方式一 Ajax方式获取Json数据 
                $.ajax({ 
                    url: 'jsondata.ashx?type=1', 
                    type: 'GET', 
                    dataType: 'json',  
                    timeout: 1000, 
                    cache: false, 
                    beforeSend: LoadFunction, //加载执行方法   
                    error: erryFunction,  //错误执行方法   
                    success: succFunction //成功执行方法   
                })
                function LoadFunction() { 
                    $("#list").html('加载中...'); 
                } 
                function erryFunction() { 
                    alert("error"); 
                } 
                function succFunction(tt) {                 
                    var json = eval(tt); //数组    
                    var tt = ""; 
                    $.each(json, function (index) { 
                        //循环获取数据   
                        var Id = json[index].id; 
                        var Name = json[index].name; 
                        var Age = json[index].age; 
                        var Score = json[index].score; 
                        tt += Id + "___" + Name + "___" + Age + "___" + Score + "<br>"; 
                    }); 
                    $("#list").html(''); 
                    $("#list").html(tt); 
                } 
    
    
                //方式二 Json方式获取数据 
                $.getJSON( 
                    "jsondata.ashx?type=1", 
                    function (data) { 
                        //循环获取数据   
                        var tt = ""; 
                        $.each(data, function (k, v) { 
                            $.each(v, function (kk, vv) { 
                                tt += kk + ":" + vv + "___"; 
                            }); 
                            tt += "<br/>"; 
                        }); 
                        $("#list2").html(tt); 
                    } 
                ); 
    
    
                //方式三 Ajax方式获取Json层级数据 
                $.ajax({ 
                    url: 'jsondata.ashx?type=3', 
                    type: 'GET', 
                    dataType: 'json', 
                    timeout: 1000, 
                    cache: false, 
                    beforeSend: LoadFunction1, //加载执行方法   
                    error: erryFunction1,  //错误执行方法   
                    success: succFunction1 //成功执行方法   
                })
                function LoadFunction1() { 
                    $("#list3").html('加载中...'); 
                } 
                function erryFunction1() { 
                    alert("error"); 
                } 
                function succFunction1(tt) { 
                    var json = eval(tt); //数组    
                    var tt = ""; 
                    $.each(json, function (index) { 
                        //循环获取数据   
                        var Id = json[index].id; 
                        var Name = json[index].name; 
                        var Age = json[index].age; 
                        var Score = json[index].score; 
                        tt += Id + "___" + Name + "___" + Age + "___"; 
                        $.each(Score, function (k, v) { 
                            tt += k + ":" + v + "___"; 
                        })
                        tt += "<br/>"; 
                    }); 
                    $("#list3").html(''); 
                    $("#list3").html(tt); 
                } 
    
    
                //方式四 Json方式获取层级数据 
                $.getJSON( 
                    "jsondata.ashx?type=3", 
                    function (json) { 
                        //循环获取数据   
                        var tt = ""; 
                        $.each(json, function (index) { 
                            //循环获取数据   
                            var Id = json[index].id; 
                            var Name = json[index].name; 
                            var Age = json[index].age; 
                            var Score = json[index].score; 
                            tt += Id + "___" + Name + "___" + Age + "___"; 
                            $.each(Score, function (k, v) { 
                                tt += k + ":" + v + "___"; 
                            })  
                            tt += "<br/>"; 
                        }); 
                        $("#list4").html(''); 
                        $("#list4").html(tt); 
                    } 
                ); 
            }); 
        </script> 

      

     

     

     

     

     

  • 相关阅读:
    QuickSort(Java)
    MergeSort(Java)
    Silverlight中Datagrid添加Button列用于控制单行对象
    二叉搜索树(BST)demo
    svn ignore使用方法
    海量数据处理面试题及解决方法
    Android中的单元测试
    Ubuntu下配置Intellij的Android开发环境
    urlrewrite地址重写之后丢失css和js解决方案
    修改后 简单的 TCP server
  • 原文地址:https://www.cnblogs.com/whatarewords/p/10717280.html
Copyright © 2011-2022 走看看