2008-10-17 19 views
5

Mam formularz, kiedy kliknę przycisk Wyślij, chcę się komunikować z serwerem i pobrać coś z serwera do wyświetlenia na tej samej stronie. Wszystko musi być zrobione w sposób AJAX. Jak to zrobić w Google App Engine? Jeśli to możliwe, chcę to zrobić w JQuery.Budowanie formularza Ajax w Google App Engine

Edytuj: Przykład w code.google.com/appengine/articles/rpc.html nie działa na formularzu.


Edytuj: Procedura rpc doesn't work for form.

+0

Używam metody RPC i działa dobrze. Zrobiłem to trochę solidniej, ponieważ używam go na kilku stronach, ale w zasadzie to samo. Jeśli to nie działa, robisz coś złego. Jeśli pojawi się konkretny błąd, opublikuj go i może będę wiedział, co się dzieje. – jamtoday

Odpowiedz

1

Dodałbym, że w Firebug powinieneś zobaczyć swoje wywołanie ajaxowe w konsoli. Jeśli otrzymujesz wyjątek podczas otwierania tego adresu, coś jest nie tak z kodem Pythona. Może nie poprawnie mapujesz swoje adresy URL?

1

Zrobiłem to z czymś takim wcześniej w jQuery (nie wiem, czy to jest „najlepszy” sposób, ale działa):

function jsonhandler(data) { 
    // do stuff with the JSON data here 
} 

var doajax = function() { 
    arr = Object(); 
    $("#form_id").children("input,select").each(function() { arr[this.name] = this.value;}); 
    $.getJSON("<page to call with AJAX>", arr, function (data) { jsonhandler(data);}); 
} 

$(document).ready(function() { 
    $("#submit_button_id").replaceWith("<input id=\"sub\" name=\"sub\" type=\"button\" value=\"Submit\">"); 
    $("#sub").click(doajax); 
} 

Można wymienić $ .getJSON z whichever jQuery AJAX function does what you want. Jeśli chcesz wyświetlić dane wyjściowe strony, do której dzwonisz, najlepszym rozwiązaniem jest .get. Jeśli masz inne typy danych wejściowych oprócz wprowadzania i wybierania w formularzu, musisz je dodać również do funkcji podrzędnych.

7

Możesz użyć jquery Form plugin do przesyłania formularzy przy użyciu ajax. Działa bardzo dobrze.

$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    return false; 
});