在 Dancer 框架中使用 ajax 填充下拉列表

Question

我正在使用 Dancer 模块获取数据：

any [ 'ajax', 'get' ] => '/textbook' => sub {
    set serializer => 'JSON';
    @textbooks = [{id => '1', name => "text1"},{id => '1', name => "text1"}...];
    return { 'text_list'  => \@textbooks;
};

我的 textbook.tt 文件中有以下代码：

           <select id="textbook">
           <option value="">Please Select</option>
          </select>

在 js 文件中

$(函数() {

$.ajax({
    type: "GET",
    url:"/textbook",
    dataType: "json",
    success: function (data) {
        $.each(data.aaData,function(i,data)
        {
         alert(data.value+":"+data.text);
         var div_data="<option value="+data.value+">"+data.text+"</option>";
        alert(div_data);
        $(div_data).appendTo('#textbook');
        });
        }
  });

});

但这不会在页面加载时自动加载条目。请帮助

Answer 1

我认为你的 JS 中有几个错误。

错误 #1：首先，您指的不是 text_list，您指的是未知元素 'aaData'。

而不是这个：

$.each(data.aaData,function(i,data)

试试这个：

$.each(data.text_list, function(i, data)

错误 #2：在迭代循环中，'data' 是数组中的 hashref。因此，'data.value' 和 'data.text' 将不起作用。您应该使用 'data.id' 和 'data.name'，正如您在 Dancer 代码中指定的那样。

而不是：

var div_data="<option value="+data.value+">"+data.text+"</option>";

试试这个：

var div_data="<option value="+data.id+">"+data.name+"</option>";

最后，为了便于阅读，建议将 'data' 更改为 each 之外的其他内容。

而不是这个：

success: function (data) {
...
$.each(data.text_list, function(i, data)

使用这个：

success: function (response) {
...
$.each(response.text_list, function(i, data)

同样，我会考虑将 'data' 更改为更具可读性的内容，例如 'textbook'.

祝你好运，如果我的回答对你有用，别忘了"accept"。

在 Dancer 框架中使用 ajax 填充下拉列表

Populate dropdown using ajax in Dancer framework

ajax

json

dropdownlistfor

dancer