Question

我正在尝试编写一个非常简单的自动提示类型函数，这样，只要用户在搜索输入中输入一个值，就会在下面显示一个匹配结果列表（在带有播放列表id的ul中）。

$("#ep_search").keydown(function() {

    var term = $("#ep_search").val();
        url = "includes/live_search.php?jsoncallback=&term=" + term;

    $.getJSON(url, function(data) {
        $.each(data.items, function(item){
            $("<li>").text(item.title).appendTo("#playlist ul");
        });
    });

});

使用chrome的开发人员工具，我可以看到我收到了结果：

([{"title":"Episode 4: Title"},{"title":"Episode 3: Title"},{"title":"Episode 2: Title"},{"title":"Episode 1: Title"}])

但是，页面上没有显示任何内容？

我错过了一些关键的东西吗？我刚开始使用JSON请求。

Answer 1

看起来data本身就是一个数组：

([{"title":"Episode 
 ^-- array

我不确定圆括号的来源，它们可能只是一个复制品，所以我会忽略它们。

试试这个：

$.each(data, function(item){
    // ...

Answer 2

data.items似乎没有定义。如果你看一下你的JSON，它只是一个数组，而不是items的对象。

Answer 3

这里有几件事情要发生。首先，您的请求的格式为JSONP，但live_search.php未使用函数名填充JSON输出。这可能是因为你没有将'jsoncallback'参数设置为“？”在你的请求中。但是，由于您要进行跨域请求（Same Origin），因此不需要使用JSONP。您可以让list_search.php返回常规JSON而不使用外部函数填充。你可以打开live_search.php，删除输出$ _GET ['jsoncallback']变量的代码以及周围的括号。结果输出应如下所示：

{"title":"Episode 4: Title"},{"title":"Episode 3: Title"},{"title":"Episode 2: Title"},{"title":"Episode 1: Title"}

此外，$ .each迭代器缺少回调函数中的第二个参数。请参阅jQuery.each()文档。我还在下面提供了一个例子。

$("#ep_search").keydown(function() {
    var term = $("#ep_search").val();
    url = "includes/live_search.php?term=" + term;

    $.getJSON(url, function(data) { 
        $.each(data, function(idx, ele){
            $("<li />").text(ele.title).appendTo("#playlist ul");
        });
    });
});

Answer 4

您的网址错误，因此服务器响应缺少功能名称。

响应应如下所示：

jQuery12345(yourJson)

但是错误的网址没有给服务器发送jsoncallback的值（该值由jQuery生成，服务器应该在响应中将其用作函数名称）

使用：

url = "includes/live_search.php?jsoncallback=?&term=" + term;

（你错过了jsoncallback的问号）

<?php
  //live_search.php 
   echo $_GET['jsoncallback'].'('.json_encode($someObject).')';
?>

或者

url = "includes/live_search.php?term=" + term;

（你不需要jsoncallback参数，它不是X-Domain-Request。让服务器用纯JSON响应）

<?php
  //live_search.php 
   echo json_encode($someObject);
?>

你的$ .each（）应如下所示：

$.each(data, function(index,item){
            $("<li>").text(item.title).appendTo("#playlist ul");
        });

（传递给回调的第一个参数是索引，而不是当前项......第二个参数是什么）

.getjson结果没有显示

4 个答案: