代码之家 › 专栏 › 技术社区 › Gary Kephart

YUI,表格提交和数据表

yui-datasource yui-datatable yui

3

Gary Kephart · 技术社区 · 16 年前

我是Java程序员,但不是JavaScript程序员。我刚刚发现了Yui,正在尝试开始使用它。我想尝试做的是将查询表单放在页面顶部,用户按Submit,结果显示在查询表单下面的yui数据表中。

通常,当然,在用户按Submit的HTML表单上,请求被发送到服务器,我使用Struts处理它,然后将请求转发到JSP,HTML被发送回浏览器。我每天都这样做。对于Ajax,我理解它的不同之处在于我应该返回XML。没问题。简单易行。

我所处理的问题都是关于Yui方面的。当按下提交按钮时,会发生什么?不正常的表格提交,对吗?我是否实现onsubmit()javascript函数,然后触发一些yui数据源来获取数据?如何传递请求参数?希望我不必手动构造请求。我猜我使用了yahoo.util.xhrdatasource,这就是数据表的数据源。

我已经设法让yui数据表使用HTML表元素工作。现在我只需要把它转换成真实的数据。奇怪的是,除非我遗漏了一些东西,否则yui文档在这里似乎有点弱。也许这只是YUI文档不涉及的基本Ajax?

1 回复 | 直到 16 年前

1

3

Jaime Garcia 16 年前

首先,当使用Ajax时,您不需要从服务器返回XML,您可以返回纯文本、XML、JSON字符串,实际上是您想要的任何形式的文本数据。这里提供了一个用JSON数据填充数据表的示例:

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

这里提供了一个如何使用Ajax和Yui发送POST请求的示例。

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

要使其工作,HTML代码中必须有一个ID为“basic”的“div”容器。注意,这与数据表上的第一个参数匹配。

希望这有帮助