yui, invio modulo e tabella dati

Question

Sono un programmatore Java, ma non un programmatore JavaScript. Ho appena scoperto YUI e sto cercando di iniziare a usarlo. Quello che mi piacerebbe provare e fare è avere il modulo di query nella parte superiore della pagina, l'utente premere Invia e i risultati vengono visualizzati in una tabella dei dati YUI sotto il modulo di query.

Normalmente, ovviamente, su un modulo HTML l'utente preme Invia, la richiesta viene inviata al server, e io uso Struts per elaborarlo e quindi inoltrare la richiesta a un JSP e HTML viene restituito al browser. Questo è quello che faccio quotidianamente. Con Ajax, capisco che è diverso nel fatto che dovrei restituire XML. Non è un problema. Facile da fare.

Le domande che ho a che fare con il lato YUI delle cose. Quando viene premuto il pulsante Invia, cosa succede? Invio del modulo non normale, giusto? Devo implementare una funzione JavaScript onSubmit () che innesca alcuni DataSource YUI per andare a recuperare i dati? Come vengono passati i parametri della richiesta? Spero di non dover costruire la richiesta manualmente. Immagino di usare un YAHOO.util.XHRDataSource e che sia l'origine dati per la DataTable.

Sono riuscito a far funzionare la DataTable YUI usando un elemento di tabella HTML. Ora ho solo bisogno di passare a dati reali. Curiosamente, la documentazione YUI sembra un po 'debole qui, a meno che non mi manchi qualcosa. Forse questo è solo l'Ajax di base che i documenti YUI non trattano?

Answer 1

Prima di tutto, quando si lavora con Ajax non è necessario restituire XML dal server, è possibile restituire testo semplice, XML, stringhe JSON, letteralmente qualsiasi forma di dati testuali desiderati. Un esempio di popolamento di un Datatable con dati JSON è fornito qui:

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

Un esempio di come inviare una richiesta di post utilizzando Ajax e YUI è fornito qui.

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

Questo dovrebbe iniziare, ora basta collegarli entrambi insieme.

Per connettersi al server è possibile utilizzare il metodo Yahoo.util.Connect.asyncRequest che accetta i seguenti parametri:

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

Vedi un esempio qui, questo usa " OTTIENI " quindi puoi utilizzare " OTTIENI " o " POST " assicurati di passare i tuoi parametri

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

Una volta che la tua funzione torna su " onSuccess " procedere come segue per analizzare il testo di risposta in JSON

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

Il " jsonData " L'oggetto ora contiene i tuoi dati, quindi ora puoi seguire questo esempio:

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

Ti mostra come inizializzare un datatable con un oggetto locale che contiene l'origine dati. fondamentalmente sarebbe qualcosa del genere

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

Perché questo funzioni, devi avere un " div " contenitore nel codice HTML con un ID di " base " nota che corrisponde al primo parametro sulla DataTable

Spero che questo aiuti