yui，表单提交和数据表

Question

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

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

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

我已经设法使用 HTML 表格元素让 YUI DataTable 工作。 现在我只需要把它切换到真实数据即可。 奇怪的是，YUI 文档似乎有点薄弱，除非我遗漏了一些东西。 也许这只是 YUI 文档没有涵盖的基本 Ajax？

Answer 1

首先，使用 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”容器，注意这与 DataTable 上的第一个参数匹配

希望这会有所帮助