让 jquery tokeniput 插件与 asp.net mvc 3 一起工作的问题

Question

我正在尝试让 jQuery Tokeninput plugin 与我的 mvc 应用程序一起使用，但某处似乎有问题，，

我的代码：

            <input type="text" id="MajorsIds" name="MajorsIds"  />
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#MajorsIds").tokenInput("/AjaxAPI/Major/GetMajors"
                    , {
                        prePopulate: [
                            { "id": 501, "name": "Test 1" },
                            { "id": 502, "name": "Test 2" },
                            { "id": 503, "name": "Test 3" }
                        ]
                    });
                });
            </script>

服务器操作结果

    public ActionResult GetMajors(string q)
    {
        var majors = _majorService.GetAllMajors()
            .Where(m=> m.Department.ToLower().Contains(q.ToLower()))
            .Select(m => new {id = m.Id, name = m.Department});

        return Json(majors,"text/html",JsonRequestBehavior.AllowGet);
    }

例如，当我在搜索输入中键入“a”时，会向服务器发送一个请求并检索数据，但不显示检索到的数据，而是冻结“正在搜索...”消息。

响应标头

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Tue, 26 Apr 2011 00:18:48 GMT
X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 3.0
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Length: 24
Connection: Close

请求标头

GET /AjaxAPI/Major/GetMajors?q=a HTTP/1.1
Host: localhost:5000
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
X-Requested-With: XMLHttpRequest
Referer: http://localhost:5000/Home/GettingStarted

回应

页面输出中返回的json是：

[{"id":1,"name":"ACCT"},{"id":3,"name":"AE"},{"id":4,"name":"ARC"}, {"id":5,"name":"ARE"},{"id":20,"name":"MATH"},{"id":21,"name":"STAT"}]

我真的不知道是什么问题,,, 或者如何解决它,,, 我的 json 响应是有效的并且应该显示结果但是由于某种原因它不起作用,,,

---

当我尝试在我的服务器中调用外部链接的提供的演示时，它工作得很好，但是一些额外的参数正在请求中与演示代码一起发送。

演示代码：

    <input type="text" id="demo-input" name="blah" />
    <script type="text/javascript">
    $(document).ready(function() {
        $("#demo-input").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php");
    });
    </script>

响应标头

HTTP/1.1 200 OK
Server: nginx/0.6.32
Date: Mon, 25 Apr 2011 22:53:34 GMT
Content-Type: text/html
X-Powered-By: PHP/5.3.3-1ubuntu9.1
Via: 1.1 cache4.ruh
Age: 0
Transfer-Encoding: chunked
Proxy-Connection: Keep-Alive
Connection: Keep-Alive
Content-Encoding: gzip

请求标头

GET http://shell.loopj.com/tokeninput/tvshows.php?callback=jQuery151008570635266447713_1303770077700&q=a&_=1303771352965 HTTP/1.1
Host: shell.loopj.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Proxy-Connection: keep-alive
Cookie: __utma=71995406.317557806.1303476969.1303642425.1303757215.5; __utmz=71995406.1303476969.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __utmc=71995406

回应

如果我直接显示链接的内容http://shell.loopj.com/tokeninput/tvshows.php,,, 我得到流动的结果：

[{"id":"978","name":"cha$e"},{"id":"1530","name":"The Life and Times of Tim"},{"id":"1210","name":"Kenny vs. Spenny"},{"id":"1393","name":"Sex and the City"},{"id":"1394","name":"Shark"},{"id":"1395","name":"Shaun the Sheep"},{"id":"1398","name":"Side Order of Life"},{"id":"1397","name":"Shear Genius"},{"id":"1396","name":"Seinfeld"},{"id":"1399","name":"Sinchronicity"}]

但是，使用 firebug 显示的响应有点不同：

jQuery151008570635266447713_1303770077699([{"id":"978","name":"cha$e"},{"id":"1530","name":"The Life and Times of Tim"},{"id":"1706","name":"The Peter Serafinowicz Show"},{"id":"1389","name":"Sea Patrol"},{"id":"1390","name":"Secrets of a Small Town"},{"id":"1211","name":"Kitchen Nightmares"},{"id":"1212","name":"L.A.P.D.: Lekanopedio Attikis Police Department"},{"id":"1214","name":"Lab Rats (2008)"},{"id":"1215","name":"La Femme Nikita"},{"id":"1216","name":"L.A. Ink"}])

请注意，响应包括请求中提供的额外“回调”和“_”参数，，， 我真的不知道这些是从哪里来的，但是发生了一些奇怪的事情

---

谁能帮我找到解决这个问题的方法？

注意：我尝试使用 POST 执行此操作，但仍然无法正常工作。 我还尝试使用完整的网址：http://localhost:500/AjaxAPI/Major/GetMajors 而不仅仅是 /AjaxAPI/Major/GetMajors ,,, 同样的事情。

Answer 1

好的,,, 我做了以下并且成功了：

在插件网站中提到 crossDomain 选项的默认设置是 false ，但是当我检查插件时，'crossDoman' 没有被分配默认值，所以我只是添加了 crossDomain: false, 到插件中的默认设置数组，问题就解决了。

现在我不知道为什么之前我在调用中指定选项 crossDomain 为 false 时它不起作用，我相信这是因为缓存。

感谢您的帮助 Hogan ,,, 我不知道 jsonp 存在。