Question

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

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

我处理YUI方面的问题。按下提交按钮后会发生什么？不正常的表单提交，对吗？我是否实现了一个onSubmit（）JavaScript函数，然后触发一些YUI DataSource来获取数据？请求参数如何通过？希望我不必手动构建请求。我猜我使用了YAHOO.util.XHRDataSource，这是DataTable的DataSource。

我设法使用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代码中有一个“div”容器，其id为“basic”，注意这与DataTable上的第一个参数匹配

希望这有帮助

yui，表单提交和数据表

1 个答案: