服务器端 json 的自动完成问题答案

【问题标题】：autocomplete problems with serverside json服务器端 json 的自动完成问题
【发布时间】：2011-01-27 15:05:52
【问题描述】：

由于某种原因，下面的脚本无法正常工作。

这是我用来生成 json 数据的代码：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
    Response.Clear()
    Response.Write(generate_json_data())
    Response.End()
End Sub

这会在屏幕上产生以下输出：

[ {id:0,value:"c++"}, {id:1,value:"java"}, {id:2,value:"php"}, {id:3,value:"coldfusion"}, {id:4,value:"javascript"}, {id:5,value:"asp"}, {id:6,value:"ruby"} ];

这是我到目前为止的 jquery，它似乎不起作用。它不会出错，当我在输入字段中输入时，什么也没有发生，当它应该显示来自 json 数据的一些数据时。

$("input").autocomplete({
    source: "serverside_array.aspx",
    dataType: "json",
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.value); // display the selected text
        $("#txtAllowSearchID").val(ui.item.id); // save selected id to hidden input
    }
});

编辑 1：来自 chromium 10 中开发人员工具的标头

Request URL:http://intranet/test_array.aspx?term=j
Request Method:GET
Status Code:200 OK
Request Headers
Accept:application/json, text/javascript, */*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Type:application/x-www-form-urlencoded
Host:intranet
Referer:http://intranet/rights_stage_three.aspx
User-Agent:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.17 (KHTML, like Gecko) Chrome/10.0.652.0 Safari/534.17
X-Requested-With:XMLHttpRequest
Query String Parameters
term:j
Response Headers
Cache-Control:private
Content-Length:204
Content-Type:application/json; charset=utf-8
Date:Thu, 27 Jan 2011 16:11:14 GMT
Server:Microsoft-IIS/6.0
X-AspNet-Version:2.0.50727
X-Powered-By:ASP.NET

编辑 2：查看响应数据 XHR，我得到以下信息

名称 test_array.aspx

方法获取

状态 200 正常

输入应用程序/json

尺寸 204b

等待时间

编辑 3：

现在我完全糊涂了。我只需将 aspx 页面生成的内容类型更改为：

text/xml

而不是

applicaiton/json

为什么当我返回 json 时它与 text/xml 一起工作？

【问题讨论】：

为什么不使用 asmx 之类的 Web 服务来生成 json？
这就是我遇到问题的原因吗？因为我没有使用网络服务来生成 json？
好吧，写入 .aspx 是非常规的 - 这就是使用 .asmx 的原因。关于 asmx 的一些背景我在设置这些之前已经回答过：stackoverflow.com/questions/2225781/…
这里是 MVC 示例：blog.schuager.com/2008/09/…
请查看原始问题中的编辑 3。

标签： asp.net jquery json jquery-ui jquery-ui-autocomplete

【解决方案1】：

使用 Webdev 工具，例如 Firebug 或 Operas 和 Chromes 内置的开发工具，它们可以列出 HTTP 请求和对您的响应。

检查是否记录了 JavaScript 错误。

如果不是，请检查响应，如果是回调，则响应 Content-Type 为 text/javascript，如果只有 JSON 数据，则为 application/json。

如果没有内容类型，ajax 请求可能会因为针对 XSS 的安全性而失败。

【讨论】：

使用 chromium 10 中的开发者工具，似乎没有显示和 javascript 错误信息。但是，当我在输入字段中键入内容时，它报告它已成功检索 html，而我认为它应该报告 json 的检索...
我已经更新了我的原始帖子以包含有关标题和响应 XHR 的详细信息。

【解决方案2】：

[ {id:0,value:"c++"}, {id:1,value:"java"}, {id:2,value:"php"}, {id:3,value:"coldfusion"}, {id:4,value:"javascript"}, {id:5,value:"asp"}, {id:6,value:"ruby"} ];

字符串末尾的分号不应该在那里。响应的 Content-Type 也应该是application/json。并考虑将所有值放在双引号中。可能没有它它会工作，但没有它它不是正确的 JSON 格式。这是符合标准的 JSON 字符串：

[{"id":0,"value":"c++"}, {"id":1,"value":"java"}, {"id":2,"value":"php"}]

【讨论】：