Question

我正在尝试使用JSON数组和自动完成功能来实现包含城市列表的表单。

我的ajax调用成功并提供了预期的成功警报，但我仍然没有获得JSON数组数据。

问题是我的suggest_json_application函数在'if form.has_key（'term'）'语句中失败并给出消息“form has no key”。

如何使用密钥term通过ajax调用将表单数据正确传递给函数？

HTML表单

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

JQuery的

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

    var term = $('#term').val();

    $.ajax({
        url: "/suggestjson",
        type: "POST",
        dataType: "json",
        data: JSON.stringify({'term': term}),
        success: function (data) {
            alert('success');
            console.log( 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'):
        print "form has key"
        q = form.getvalue("term", "")
        matches = [c for c in cities if c.lower().startswith(q.lower())]
    else:
        print "form has no key"
        matches = []

    return json.dumps(matches)

Answer 1

目前您正在向服务器发送整个html元素。调用val()函数以获取元素的值

还可以使用id选择器轻松访问元素

像这样：

var term = $('#term').val();

Answer 2

使用val（）： - 详见here

    var term = $('#term').val();

以及ajax中的数据参数应该是

    data : {term: term}

Answer 3

请尝试将“数据”选项更改为ajax调用中的对象，如下所示

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

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

  $.ajax({
    url: "/suggestjson",
    type: "GET",
    dataType: "json",
    data: {'term': term},
    success: function (data) {
        alert('success');
        console.log( data );

    }     
  }); 
});

如何正确使用Ajax调用将表单数据发送到Webserver？

3 个答案: