yui，表单提交和数据表

Question

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

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

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

我已经设法让 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 上的第一个参数相匹配

希望对你有帮助