Jquery Ajax 自动完成答案

【问题标题】：Jquery Ajax AutocompleteJquery Ajax 自动完成
【发布时间】：2013-06-02 20:51:33
【问题描述】：

我正在尝试实现城市的自动完成形式，其中包含 JSON 数组和自动完成函数的 Web 服务器，该函数返回来自城市数组的城市名称的 JSON 完成数组，但我似乎没有从我的 Ajax 调用中得到任何响应。我的 Ajax 调用有问题吗？

我正在尝试将名为 "term" 的表单数据提交到 url "/suggestjson" 中，然后在 html 文件的正文中显示返回的 JSON

我知道网络服务器可以正常工作，因为在浏览器中输入“localhost:8000/suggestjson?term=a”会返回所有以“a”开头的城市（例如阿德莱德），点击http://postimg.org/image/gki6kct23/ 即可查看

HTML 表单

</head>
<body>
<form>
  <fieldset><legend>Cities</legend>
  <input type='text' name='city' id='city'>
</form>

jQuery

$('document').ready(function() {

    var term = $('input[name=city]');

    $.ajax({
        url: "/suggestjson",
        type: "GET",
        dataType: "json",
        data: term,
        success: function (data) {
            $("body").append(data);
        }    
    }); 
});

网络服务器

cities = ['New York', 'London', 'Los Angeles', 
          'Paris', 'San Francisco', 'Adelaide']

if environ['PATH_INFO'] == "/suggestjson":
    return suggest_json_application(environ, start_response)


def suggest_json_application(environ, start_response):
    //Return JSON array of completions for a city name

    form = cgi.FieldStorage(fp=environ['wsgi.input'], environ=environ)

    if form.has_key('term'):
        q = form.getvalue("term", "")
        matches = [i for i in cities if i.startswith(q)]
    else:
        matches = []

    return json.dumps(matches)

【问题讨论】：

试试：var term = $('input[name=city]').val();还有，data: {'term': term}
是的，但最终您必须将值而不是 dom 节点提供给 ajax 提交。
您在控制台中看到任何 500 吗？另外，start_response 是什么？
还有一个问题——如果你这样做print json.dumps(matches)，它会给出正确的答案吗？
这意味着这是错误所在。调试程序以查看输入是否正确。 form.has_key('term') 输出什么？

标签： jquery python ajax json autocomplete

【解决方案1】：

您没有正确设置data 属性，请尝试使用输入值创建一个对象：

$.ajax({
    url: "/suggestjson",
    type: "GET",
    dataType: "json",
    data: {term: term.val()}, //get the value of the input and put it in a data object
    success: function (data) {
        //data here are the results coming from the server, format this as HTML and then append
       var htmlData = ''
       .... formatting here ....
       $('body').append(htmlData);

    }    
});

【讨论】：

您的 javascript 控制台中是否有任何错误？此外，您还尝试将 javascript 数组附加到正文。 append() 应该采用 HTML，因此您需要在成功处理程序中格式化结果。

【解决方案2】：

您是否确认/suggestion 产生了您期望的 JSON？你可以粘贴结果吗？

你的term 应该是var term = $("input[name=city]").val()，你的data 应该是data: 'term='+term

【讨论】：

!Image of Results 这是我从“localhost:8000/suggestjson?term=a”得到的结果的图像，因为原始数组比代码中显示的要大得多，所以结果更多以上