Question

Ajax数据被视为文字

我正在使用jQuery UI AutoComplete。它适用于本地dadta源。但是当我将数据源更改为远程ajax数据源时，它不像本地数据源那样工作。看起来它将回调数据视为文字或字符串而不是数据源如数组或JSON，即使回调数据是JSON。此外，回调数据与本地数据具有相同的格式。

本地数据源：

var local = [
    {
        "label": "item 1",
        "value": "item 1",
        "id": 1
    },
    {
        "label": "item 2",
        "value": "item 2",
        "id": 2
    },
    {
        "label": "item 3",
        "value": "item 1",
        "id": 3
    }
];

打印到控制台上的回调数据源：

[
    {
        "label": "CIS104",
        "value": "CIS104",
        "id": "35"
    },
    {
        "label": "CIS214",
        "value": "CIS214",
        "id": "60"
    },
    {
        "label": "CIS256",
        "value": "CIS256",
        "id": "61"
    },
    {
        "label": "CIS335",
        "value": "CIS335",
        "id": "62"
    }
];

这是我的HTML：

<head> 
<title>AutoComplete TextBox with jQuery</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
    <script type="text/javascript">

        var localsource = [
  { "label": "item 1", "value": "item 1", "id": 1 },
  { "label": "item 2", "value": "item 2", "id": 2 },
  { "label": "item 3", "value": "item 1", "id": 3}];

  $(function() {
      $("[id$=txtAuto]").autocomplete(
     {
         source: function(request, response) {
             $.ajax(
             {
                 url: "/playground/service/PlayGroundWebService.asmx/GetListOfCourse",
                 data: "{ 'param': '" + request.term + "' }",
                 dataType: "json",
                 type: "POST",
                 contentType: "application/json; charset=utf-8",
                 async: true,
                 success: function(data) {
                //data.d because it's .NET web application    

                   var remotesource = data.d;
                //It works if remotesource = localsource
                   response(remotesource);
                   console.log(remotesource);
                 },
                 error: function(result) { }
             });
         },
         select: function(event, ui) {
             alert(ui.item.id);
         }
     });
  });      

    </script>
</head>
<body>

   <div class="demo">
        <div class="ui-widget">
            <label for="txtAuto">Enter Course # or title: </label>
            <input id="txtAuto" type="text"  style="width: 600px" />
        </div>
    </div>

</body>
</html>

谁能说出问题是什么？感谢

更新1：

console.log（data）给出了这个：

Object { d=

"[ { "label": "CIS104", "value": "CIS104", "id": "35" }, 
{ "label": "CIS214", "value": "CIS214", "id": "60" }, 
{ "label": "CIS256", "value": "CIS256", "id": "61" }, 
{ "label": "CIS335", "value": "CIS335", "id": "62" } ]"

}

Answer 1

我明白了。我需要使用JavaScript eval方法将远程数据源转换为JavaScript对象（string - ＆gt; object）

// Change var remotesource = data.d; to this:

var remotesource = eval("(" + data.d + ")");

Answer 2

您是否检查过请求定位网址的结果？

在Chrome中运行您的脚本，然后查看控制台中的网络标签。当您运行触发ajax调用的进程时，您应该会看到记录请求。单击请求并查看响应，是否符合预期？ - 它失败了吗？

这就是你需要开始的地方。

Ajax数据回调被视为文字

2 个答案: