从Ajax请求创建的Javascript数组

Javascript Array created from Ajax Request

本文关键字:Javascript 数组 创建 Ajax 请求      更新时间:2023-09-26

我正试图使用一个我不太熟悉的Ajax请求来填充一个数组(用于jquery ui元素)。有两个文件,selectStudents.php是将要查看的文件,loadStudents.php则是Ajax请求的文件。

当我查看loadStudents.php,复制输出,并用它替换Ajax请求时,它运行得很好,所以我的Ajax只是出了问题。有人看到它是什么吗?

<script>
$(function() {
    var availableTags = new Array();
    new Ajax.Request('includes/loadStudents.php', {
        onSuccess : function(xmlHTTP){
            eval(mlHTTP.responseText);
        }
    }); 
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});
</script>

谢谢!

这看起来像原型。如果您使用的是jQuery,则ajax请求如下所示:

$.ajax('includes/loadStudents.php', {
  success: function(data) {
    // no need to eval, jQuery handles parsing the json for you
    console.debug(data);
  }
});

有关详细信息,请参见jQuery.ajax

此外,使用jQuery UI,您可以让autocomplete为您处理ajax:

$('#tags').autocomplete({
  source: 'includes/loadStudents.php'
});

请参阅jQuery UI自动完成以了解更多用法。

假设Ajax.Request工作,我的评论中描述了数组设置不正确的原因:Ajax是异步的。.autocomplete调用在运行onSuccess回调之前执行(因此在设置数组元素之前执行)。

只需将.autocomplete()调用放入函数中即可解决此问题。但用另一种方式解决这个问题要好得多:

不要在PHP脚本中返回JavaScript。返回JSON:

<?php
    $data = array('Doe, Kid', 'Smith, John');
    echo json_encode($data);
?>

然后你的JavaScript看起来像:

$(function() {
    $.getJSON('includes/loadStudents.php', function(data)
        $( "#tags" ).autocomplete({
            source: data
        });
    });
});

或者,正如@scurker已经提到的,将URL设置为值source。文档中对此进行了描述:

只需指定源选项,就可以自定义自动完成以使用各种数据源。数据源可以是:

  • 具有本地数据的数组
  • 字符串,指定URL
  • a回拨

(…)

当使用字符串时,自动完成插件希望该字符串指向将返回JSON数据的URL资源。它可以在同一台主机上,也可以在不同的主机上(必须提供JSONP)。请求参数"term"将添加到该URL中。数据本身可以采用与上述本地数据相同的格式。

因此,为了实现这一点,您必须返回JSON,如上所示。