yui，表单提交和数据表

Question

我是 Java 程序员，但不是 JavaScript 程序员。我刚刚发现了 YUI，并正在尝试开始使用它。我想尝试做的是在页面顶部设置查询表单，用户按下提交，结果显示在查询表单下方的 YUI 数据表中。

当然，通常情况下，在用户按下提交的 HTML 表单上，请求被发送到服务器，我使用 Struts 处理它，然后将请求转发到 JSP，HTML 被发送回浏览器。这就是我每天所做的。对于 Ajax，我理解它的不同之处在于我应该返回 XML。不是问题。很容易做到。

我遇到的关于 YUI 方面的问题。当按下提交按钮时，会发生什么？不是正常的表单提交，对吧？我是否实现了一个 onSubmit() JavaScript 函数，然后触发一些 YUI DataSource 去获取数据？请求参数如何传递？希望我不必手动构建请求。我猜我使用的是 YAHOO.util.XHRDataSource，这就是 DataTable 的 DataSource。

我已经设法让 YUI DataTable 使用 HTML 表格元素工作。现在我只需要将其切换为真实数据。奇怪的是，YUI 文档在这里似乎有点弱，除非我遗漏了什么。也许这只是 YUI 文档未涵盖的基本 Ajax？

Answer 1

首先，在使用 Ajax 时，您不需要从服务器返回 XML，您可以返回纯文本、XML、JSON 字符串，以及您想要的任何形式的文本数据。此处提供了一个使用 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"});

为此，您必须在 HTML 代码中有一个 id 为“basic”的“div”容器注意这与 DataTable 上的第一个参数匹配

希望对你有帮助