从Ajax请求创建的Javascript数组

时间:2011-06-15 23:15:01

标签: php javascript ajax

我正在尝试使用我不太熟悉的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>

谢谢!

2 个答案:

答案 0 :(得分:2)

看起来像prototype。如果您使用的是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 Autocomplete

答案 1 :(得分:1)

假设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 already mentioned,将网址设置为source。它在documentation

中描述
  

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

     
      
  • 包含本地数据的数组
  •   
  • 一个String,指定一个URL
  •   
  • a Callback
  •   
     

(...)

     

使用String时,Autocomplete插件希望该字符串指向将返回JSON数据的URL资源。它可以位于同一主机上,也可以位于不同的主机上(必须提供JSONP)。请求参数“term”将添加到该URL。数据本身的格式与上述本地数据的格式相同。

因此,为了使其正常工作,您必须返回JSON,如上所示。