Yui, Formularübermittlung und Datentabelle

Question

Ich bin ein Java-Programmierer, aber kein JavaScript-Programmierer. Ich habe gerade YUI entdeckt, und ich versuche, mit ihm zu beginnen. Was würde Ich mag, um zu versuchen und zu tun haben, ist die Abfrage Formular oben auf der Seite der Benutzer drücken Sie Senden und die Ergebnisse zeigen sich in einer YUI Datatable unter der Frageform.

Normalerweise natürlich auf einem HTML-Formular drückt der Benutzer Senden, wird die Anfrage an den Server gesendet, und ich verwende Struts, sie zu verarbeiten und weiterleiten dann die Anforderung an eine JSP und HTML wird zurück an den Browser gesendet. Das ist, was ich auf einer täglichen Basis zu tun. Mit Ajax, ich verstehe es in verschiedenen, dass ich XML statt zurückgeben sollte. Kein Problem. Einfach zu tun.

Die Fragen, die ich habe mit der YUI-Seite der Dinge befassen. Wenn die Senden-Taste gedrückt wird, was geschieht dann? Nicht normale Form Vorlage, nicht wahr? Ich habe eine onSubmit () JavaScript-Funktion implementieren, die dann einige YUI Datasource löst die Daten holen zu gehen? Wie kommen die Anfrage params übergeben? Hoffentlich muss ich nicht die Anforderung manuell konstruieren. Ich vermute, dass ich ein YAHOO.util.XHRDataSource verwenden und das ist die Datasource für die Datentabelle.

Ich habe es geschafft, die YUI Datatable erhalten mit einem HTML-Tabellenelement zu arbeiten. Jetzt muss ich es nur über zu realen Daten wechseln. Merkwürdigerweise scheint die YUI Dokumentation ein bisschen hier schwach, es sei denn, ich etwas fehle. Vielleicht ist das nur grundlegende Ajax, dass die YUI docs decken nicht?

Answer 1

Vor allem, wenn sie mit Ajax arbeiten Sie nicht brauchen, XML vom Server zurück, Sie Text, XML, JSON Strings zurückgeben könnten, buchstäblich jede Form von Textdaten, die Sie wollen. Ein Beispiel für eine Datentabelle mit JSON-Daten bevölkern finden Sie hier:

http://developer.yahoo.com/yui/examples/datatable /dt_xhrjson.html

Ein Beispiel, wie eine Post-Anforderung mit Ajax und YUI senden Sie hier.

http://developer.yahoo.com/yui/examples/connection /post.html

Das sollte Ihnen den Einstieg, jetzt verknüpfen nur beide zusammen.

auf dem Server verbinden Sie die Yahoo.util.Connect.asyncRequest Methode verwenden können, die in den folgenden Parameter verwendet:

static object asyncRequest ( method , uri , callback , postData );

Sehen Sie hier ein Beispiel, das man verwendet „GET“, so dass Sie verwenden können, entweder „GET“ oder „POST“ nur sicherstellen, dass Sie in Ihren Parametern übergeben

http://developer.yahoo.com/yui/examples/json /json_connect.html

Wenn Sie Ihre Funktion gibt auf „onSuccess“ Sie wie folgt vor den Antworttext zu JSON analysieren

try {
    jsonData = YAHOO.lang.JSON.parse(o.responseText);
}
 catch (x) {
    alert("JSON Parse failed!");
    return;
}

Die „jsonData“ Objekt enthält jetzt auch die Daten, so dass Sie nun diesem Beispiel folgen können:

http://developer.yahoo.com/yui/examples/datatable /dt_basic.html

Es zeigen Sie, wie Sie eine Datentabelle mit einem lokalen Objekt initialisieren die Datenquelle zu halten. im Grunde wäre es so etwas wie diese

var myColumnDefs = [
        {key:"Column1Data", label:"Column1 Header" sortable:true, resizeable:true},
        {key:"Column2Data", label:"Column2 Header" sortable:true, resizeable:true}
        ];

var myDataSource = new YAHOO.util.DataSource(jsonData);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["Column1Data","Column2Data"]
        };

        var myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, myDataSource, {caption:"DataTable Caption"});

Damit dies funktioniert, müssen Sie einen „div“ Container im HTML-Code mit einem ID von „basic“ beachten Sie, das entspricht den ersten Parameter auf dem Datatable

Hope, das hilft