yui, envío de formulario y tabla de datos

Question

Soy un programador de Java, pero no un programador de JavaScript. Acabo de descubrir YUI y estoy tratando de comenzar a usarlo. Lo que me gustaría probar y hacer es tener el formulario de consulta en la parte superior de la página, el usuario presiona Enviar y los resultados se muestran en una tabla de datos YUI debajo del formulario de consulta.

Normalmente, por supuesto, en un formulario HTML, el usuario presiona Enviar, la solicitud se envía al servidor, y uso Struts para procesarla y luego reenvío la solicitud a un JSP y el HTML se envía nuevamente al navegador. Eso es lo que hago a diario. Con Ajax, entiendo que es diferente ya que debería devolver XML en su lugar. No es un problema. Fácil de hacer.

Las preguntas que tengo tratan sobre el lado YUI de las cosas. Cuando se presiona el botón Enviar, ¿qué sucede? No es la presentación normal del formulario, ¿verdad? ¿Implemento una función de JavaScript onSubmit () que luego activa algunos YUI DataSource para ir a buscar los datos? ¿Cómo se pasan los parámetros de solicitud? Espero no tener que construir la solicitud manualmente. Supongo que uso un YAHOO.util.XHRDataSource y ese es el DataSource para DataTable.

He logrado que la YUI DataTable funcione utilizando un elemento de tabla HTML. Ahora solo necesito cambiarlo a datos reales. Curiosamente, la documentación de YUI parece un poco débil aquí, a menos que me falte algo. ¿Tal vez esto es solo Ajax básico que los documentos de YUI no cubren?

Answer 1

En primer lugar, cuando trabajas con Ajax no necesitas devolver XML desde el servidor, puedes devolver cadenas de texto plano, XML, JSON, literalmente cualquier forma de datos textuales que desees. Aquí se proporciona un ejemplo de cómo llenar una tabla de datos con datos JSON:

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

Aquí se proporciona un ejemplo de cómo enviar una solicitud de publicación utilizando Ajax y YUI.

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

Eso debería ayudarlo a comenzar, ahora solo unirlos a ambos.

Para conectarse al servidor, puede usar el método Yahoo.util.Connect.asyncRequest que toma los siguientes parámetros:

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

Vea un ejemplo aquí, este usa " GET " para que pueda usar "GET" o "POST" solo asegúrate de pasar tus parámetros

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

Una vez que su función regrese en su " onSuccess " haga lo siguiente para analizar el texto de respuesta a JSON

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

El " jsonData " El objeto ahora contiene sus datos, por lo que ahora puede seguir este ejemplo:

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

Le muestra cómo inicializar una tabla de datos con un objeto local que contiene la fuente de datos. básicamente sería algo así

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

Para que esto funcione, debe tener un " div " contenedor en el código HTML con una identificación de "básico" tenga en cuenta que esto coincide con el primer parámetro en la tabla de datos

Espero que esto ayude