jquery getJSON 多次调用中断答案

【问题标题】：jquery getJSON called multiple times breakingjquery getJSON 多次调用中断
【发布时间】：2015-08-17 04:33:26
【问题描述】：

对 getJSON 的一次调用，就可以正常工作...

<div class="col-sm-3 col-xs-12" >
    <label for="pickers" >Picker</label>
    <select name="Picker" id="selectPicker" class="form-control" ></select>
    <label for="grinners" >Grinner</label>
    <select name="Grinner" id="selectGrinner" class="form-control" ></select>
</div>

<script>
$( document ).ready( function() {

    //pickers
    $.getJSON( '/people.php', { get:'pickers' }, function( p ){

        var pOptions = '';
        for ( var pi=0; pi<=k['DATA'].length; pi++ ) {

            pOptions += '<option value="' + p['DATA'][pi][0] + '">' + p['DATA'][pi][1] + ' (' + p['DATA'][pi][2] + ')</option>';

        }

        $( '#selectPicker' ).html( pOptions );
    });



});
</script>

但是 - 当我添加另一个调用时，这两个调用都中断了，我得到了调用，并且响应很好，正在返回 JSON 对象，但 UI 没有填充选择...

上面的作品，如果我添加这个（下面）它会破坏两个选择...... 我已经将所有变量命名为不同的，所以我不应该遇到任何冲突......

<script>
$( document ).ready( function() {

    //pickers
    $.getJSON( '/people.php', { get:'pickers' }, function( p ){

        var pOptions = '';
        for ( var pi=0; pi<=k['DATA'].length; pi++ ) {

            pOptions += '<option value="' + p['DATA'][pi][0] + '">' + p['DATA'][pi][1] + ' (' + p['DATA'][pi][2] + ')</option>';

        }

        $( '#selectPicker' ).html( pOptions );
    });

    //grinners
    $.getJSON( '/people.php', { get:'grinners' }, function( g ){

        var gOptions = '';
        for ( var gi=0; gi<=g['DATA'].length; gi++ ) {

            gOptions += '<option value="' + g['DATA'][gi][0] + '">' + g['DATA'][gi][1] + ' (' + g['DATA'][gi][2] + ')</option>';

        }

        $( '#selectGrinner' ).html( gOptions );
    });

});
</script>

JSON 看起来像这样（仅供参考）：

选择器；

{

    "COLUMNS":["ID","PERSON","POSITION"],
    "DATA":[[1,"Jo Bob","Banjo"],[2,"Garth Waller","jug"],[3,"Boswell Higgins","washboard"]]

}

笑脸；

{

    "COLUMNS":["ID","PERSON","RELATION"],
    "DATA":[[1,"Jimmy John","Grand-pappy"],[2,"Margie Monroe","Grammy"],[3,"'big' Tom Turney","cousin/brother"]]

}

【问题讨论】：

我不确定，但问题一定是因为 URL 捕获
您应该检查插入到 dom 中的内容。可能是插入的某些字符没有转义，因此破坏了 dom 结构。
您在pickers for 上有错字，循环k['DATA'] 应该是p['DATA']
你会为此提供一些虚假数据吗？控制台中是否有任何 javascript 错误？
你的JSON和上面的完全一样吗？使用console.log(g['DATA'].length)会得到什么？

标签： jquery getjson

【解决方案1】：

如果 URL 捕获存在问题，我的解决方案是向 URL 添加日期请求参数，例如，

 '/people.php?d="+ new Date()

其中 new Date() 是当前的 JavaScript 日期。您可以选择拨打一个电话并管理您的服务器代码以同时返回两个响应。

【讨论】：

我怀疑你在一定程度上是正确的，但是，这并没有解决我的问题。

【解决方案2】：

对于这个特定的问题 - 我认为修复它的“一个”问题是我的 for 循环中的“

 for ( var pi = 0; pi <= p['DATA'].length; pi++ ) {

应该是

 for ( var pi = 0; pi < p['DATA'].length; pi++ ) {

我需要确认我没有丢失最后一个数组元素，但现在它可以工作了。

但是 - 在我寻找解决方案的过程中，我的编码方式有所不同 - 这是一个对我有用的解决方案，我希望它更详细（尤其是在学习新东西时），我来接受关于 JS 的观点。

哦，它可以毫无问题地拨打多个电话。

$( document ).ready( function() {

        $.ajax({
            method: 'POST',
            url: '/game.cfm',
            data: { get:'pickers' },
            dataType: 'json',
            cache: false
        })
        .fail( function( jqXHR ) {

            $( "#msg" ).html( jqXHR.responseText + ' ' + jqXHR.statusText );

        })
        .done( function( data ) {

            if ( data['DATA'].length ) {

                var options = '';

                for ( var i = 0; i < data['DATA'].length; i++ ) {

                    options += '<option value="' + data['DATA'][i][0] + '">' + data['DATA'][i][1] + ' (' + data['DATA'][i][2] + ')</option>';

                }

                $( '#selectPicker' ).html( options );

            } else {

                $( '#selectPicker' ).html( '<option value="0" >No Selections Available</option>' );

            }

        });

        });

【讨论】：