yui, отправка формы и таблица данных - PullRequest
Новая
       15

yui, отправка формы и таблица данных

3 голосов
/ 17 марта 2009

Я программист на Java, но не программист на JavaScript. Я только что обнаружил YUI и пытаюсь начать использовать его. Я хотел бы попробовать создать форму запроса вверху страницы, нажать кнопку «Отправить», и результаты отобразятся в таблице данных YUI под формой запроса.

Обычно, конечно, в HTML-форме пользователь нажимает Submit, запрос отправляется на сервер, и я использую Struts для его обработки, а затем пересылаю запрос в JSP, а HTML-сообщение отправляется обратно в браузер. Это то, что я делаю ежедневно. Я понимаю, что с Ajax все по-другому, я должен вместо этого возвращать XML. Не проблема. Легко сделать.

Вопросы, которые у меня есть, касаются YUI. Что происходит при нажатии кнопки «Отправить»? Не нормальная подача формы, верно? Должен ли я реализовать JavaScript-функцию onSubmit (), которая затем запускает некоторый YUI DataSource для извлечения данных? Как передать параметры запроса? Надеюсь, мне не нужно составлять запрос вручную. Я предполагаю, что я использую YAHOO.util.XHRDataSource, и это DataSource для DataTable.

Мне удалось заставить DataTable YUI работать, используя элемент таблицы HTML. Теперь мне просто нужно переключить его на реальные данные. Любопытно, что документация по YUI здесь немного слабовата, если я что-то не упустил Может быть, это просто базовый Ajax, который не распространяется на документы YUI?

1 Ответ

3 голосов
/ 17 марта 2009

Прежде всего, при работе с Ajax вам не нужно возвращать XML с сервера, вы можете возвращать простой текст, XML, строки JSON, буквально любую форму текстовых данных, которую вы хотите. Один пример заполнения Datatable данными JSON представлен здесь:

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

Пример отправки почтового запроса с использованием Ajax и YUI приведен здесь.

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

Это должно помочь вам начать, теперь просто свяжите их вместе.

Для подключения к серверу вы можете использовать метод Yahoo.util.Connect.asyncRequest, который принимает следующие параметры: 

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

См. Пример здесь, этот использует «GET», так что вы можете использовать «GET» или «POST», просто убедитесь, что вы передаете свои параметры

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

Как только ваша функция вернется к «onSuccess», сделайте следующее, чтобы проанализировать текст ответа в JSON 

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

Объект "jsonData" теперь содержит ваши данные, поэтому теперь вы можете следовать этому примеру:

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

В нем показано, как инициализировать таблицу данных с помощью локального объекта, содержащего источник данных. в основном это было бы что-то вроде этого 

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

Чтобы это работало, у вас должен быть контейнер "div" в HTML-коде с идентификатором "basic" note, это соответствует первому параметру в DataTable

Надеюсь, это поможет

...