解析带有自动完成功能的json

Question

这可能是一个重复的问题，但我坚持解析json。由于我与jQuery中间，所以我陷入了这个问题。

我正在用CakePhp实现自动完成。

我的回复函数返回正确的json。这里是我的功能

public function jsonSongs() { 
     $json_output = ''; 
     $role = $this->Auth->user('role'); 
     $userId = $this->Auth->user('id'); 
     $condition = array("Song.name LIKE " => "%" . $this->request->data['Song_name'] . "%"); 
     $song_name = $this->Song->find('list', array('conditions' => $condition, 'limit' => $this->request->data['Song_maxRows'], 'recursive' => '-1', 'order' => 'Song.name')); 
     foreach ($song_name as $key => $name) { 
      $json_output[] = array("id" => $key, "label" => $key." - ".$name, "value" => $name); 
     } 
     echo json_encode($json_output); 
     $this->layout = $this->autoLayout = $this->autoRender = false; 
    } 

返回的JSON是

[{"id":8,"label":"8 - .Dhal gayaa aafataab ai saaqii","value":".Dhal gayaa aafataab ai saaqii"},{"id":32,"label":"32 - a.nga.DaaI par a.nga.DaaI letii hai raat judaaI kii","value":"a.nga.DaaI par a.nga.DaaI letii hai raat judaaI kii"},{"id":34,"label":"34 - aa.Nkh ko jaam samajh baiThaa thaa a.njaane me.n","value":"aa.Nkh ko jaam samajh baiThaa thaa a.njaane me.n"},{"id":35,"label":"35 - aa.Nkh se aa.Nkh milaa baat banaataa kyuu.N hai","value":"aa.Nkh se aa.Nkh milaa baat banaataa kyuu.N hai"},{"id":36,"label":"36 - aa.Nkh se duur naa ho dil se utar jaayegaa","value":"aa.Nkh se duur naa ho dil se utar jaayegaa"},{"id":37,"label":"37 - aa.Nkho.n kaa thaa qasuur naa dil kaa qasuur thaa","value":"aa.Nkho.n kaa thaa qasuur naa dil kaa qasuur thaa"},{"id":38,"label":"38 - aa.Nkho.n me.n jal rahaa hai kyuu.N bujhataa nahii.n dhu.Naa","value":"aa.Nkho.n me.n jal rahaa hai kyuu.N bujhataa nahii.n dhu.Naa"},{"id":39,"label":"39 - aa.Nkho.n se yuu.N aa.Nsuu .Dhalake","value":"aa.Nkho.n se yuu.N aa.Nsuu .Dhalake"},{"id":40,"label":"40 - aadamii aadamii ko kyaa degaa","value":"aadamii aadamii ko kyaa degaa"},{"id":41,"label":"41 - aae hai.n samajhaane log","value":"aae hai.n samajhaane log"},{"id":43,"label":"43 - aah ko chaahiye ik umr asar hone tak","value":"aah ko chaahiye ik umr asar hone tak"},{"id":44,"label":"44 - aaho.n me.n hai asar magar farq asar asar me.n hai","value":"aaho.n me.n hai asar magar farq asar asar me.n hai"}] 

，最后我的jQuery函数是..

  $(function() { 
      function log(message) { 
       $("<div/>").text(message).prependTo("#log"); 
       $("#log").scrollTop(0); 
      } 

      $("#song").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         minLength: 2, 
         method: "post", 
         url: "<?php echo HTTP_PATH; ?>/songs/jsonSongs", 
         dataType: "jsonp", 
         data: { 
          'Song.maxRows': 12, 
          'Song.name': request.term 
         }, 
         success: function (data) { 
         var obj = $.parseJSON(data); 
         alert(obj.id === "8"); 
          response($.map(data, function (item) { 
           return { 
            label: item.label, 
            value: item.id 
           } 
          })); 
         } 
        }); 
       }, 
       select: function (event, ui) { 
        log(ui.item ? 
         "Selected: " + ui.item.label : 
         "Nothing selected, input was " + this.value); 
       }, 
       open: function() { 
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
       }, 
       close: function() { 
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
       } 
      }); 
     }); 

我想说明的建议，当用户点击任何它只是所著隐藏文本框。我甚至无法提醒我的JSON。

Answer 1

如果您ajax要求url是在同一个域然后进行以下检查

1. 变化dataType: "jsonp",到dataType: "json",
2. 前echo json_encode($json_output);
3. 添加header('Content-type: application/json');删除var obj = $.parseJSON(data);alert(obj.id === "8");不需要解析

jsFiddle