2

Ajax データはリテラルとして扱われます

jQuery UI オートコンプリートを使用しています。ローカル データ ソースでは問題なく動作しますが、データ ソースをリモート 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" } ]"

}
4

2 に答える 2

1

私はそれを考え出した。JavaScript eval メソッドを使用して、リモート データ ソースを JavaScript オブジェクト (文字列 -> オブジェクト) に変換する必要があります。

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

var remotesource = eval("(" + data.d + ")");
于 2013-05-09T12:30:23.850 に答える
0

URL をターゲットにリクエストした結果がどうなるか確認しましたか?

Chrome でスクリプトを実行し、コンソールのネットワーク タブを確認します。ajax 呼び出しを起動するプロセスを実行すると、ログに記録された要求が表示されます。リクエストをクリックして、レスポンスを見てください。期待どおりですか? ――失敗ですか。

そこから始めなければなりません。

于 2013-05-09T10:47:41.200 に答える