衣，表单提交和数据表

Question

我是一个Java程序员，而不是一个JavaScript程序员。我刚才发现锐，并正尝试使用它上手。我想尝试做的是在页面的顶部查询表单，用户按下提交，结果在查询表格下方的YUI数据表显示出来。

一般情况下，当然，在一个HTML形成用户按下提交，该请求被发送到服务器，我使用Struts来处理它，然后将请求转发到JSP和HTML被发送回浏览器。这就是我每天都在做。使用Ajax，我知道这是在说我应该返回XML，而不是不同。不是一个问题。很容易做到。

我处理事情的YUI侧的问题。当按下提交按钮，会发生什么？不正常的表单提交，对吧？难道我实施的onsubmit（）JavaScript函数，然后触发一些YUI数据源去获取数据？如何将请求参数获得通过？但愿我不必手动构建请求。我猜，我使用一个YAHOO.util.XHRDataSource，这对DataTable中的数据源。

我已经成功地得到了YUI DataTable中使用HTML表格元素工作。现在，我只需要在其切换到真实数据。奇怪的是，YUI文档似乎有点弱这里，除非我失去了一些东西。也许这只是基本的Ajax的锐文档不包括？

Answer 1

首先，使用Ajax的工作，当你不需要从服务器返回的XML，你可以返回纯文本，XML，JSON字符串，从字面上想要的任何形式的文本数据。这里提供填充有JSON数据的DataTable的一个示例：

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注意这第一个参数相匹配的数据表

希望这有助于