How to use Ajax call correctly to send form data to Webserver?

Question

I am trying to implement a form containing a list of cities, using a JSON array and an autocomplete function.

My ajax call is successful and gives the expected success alert, but I'm still not getting the JSON array data.

The problem is that my suggest_json_application function is failing at the 'if form.has_key('term')' statement and giving the message "form has no key".

How can I pass the form data to the function properly through the ajax call, with the key term?

HTML form

</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 );
        }    
    }); 
});

Webserver

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)

Try to use `POST` and stringify your data: `data: JSON.stringify({'term': term})`. — , Jun 07 '13 at 06:18
@amanda23 I think that you have missed something in your Python code, I didn't know much about it, just some notes: (1) `cgi` doesn't need to import? (2) `has_key` is removed from version 3. (3) try to find the typeof `form["term"]`. _maybe you already did it, ofcourse_ `:)` — , Jun 07 '13 at 06:29
@amanda23 what is $('#term') i dont see that in your html instead should it be $('#city') ?? — Kishore, Jun 07 '13 at 06:31
@amanda23 good to hear. try to print `form["term"]`, it must contains a JSON string. If it is, you must parse it as json, maybe something like this: `data = json.loads(form["term"])` (don't forget to `import json`. — , Jun 07 '13 at 06:40
When you are revising your OP, please indicate that on the skeleton question you leave behind so that others do not attempt to answer a question that is unrelated to what you eventually re-post. — cssyphus, Jun 07 '13 at 18:09

score 0 · Answer 1 · answered Jun 07 '13 at 05:55

0

Currently you are sending whole html element to server. Invoke val() function to get the value of element,

Also use id selector for easy access to element,

like this:

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

answered Jun 07 '13 at 05:55

Zain Shaikh

6,013
6
41
66

Thanks, i've tried that but it doesn't make a difference since my console still shows me "form has no key" message – amanda23 Jun 07 '13 at 06:02

Roopendra · Answer 2 · 2013-06-07T06:02:39.943

0

Use val() :- see details here

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

and also data parameter in ajax it should be

    data : {term: term}

edited Jun 07 '13 at 06:02

answered Jun 07 '13 at 05:57

Roopendra

7,674
16
65
92

thanks, i've updated both but still the console tells me "form has no key" in my webserver – amanda23 Jun 07 '13 at 06:05

score 0 · Answer 3 · answered Jun 07 '13 at 05:58

please try to change "data" option to a object in the ajax call as follow

$('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 );

    }     
  }); 
});

How to use Ajax call correctly to send form data to Webserver?

3 Answers3