3

私は Java プログラマーですが、JavaScript プログラマーではありません。YUI を発見したばかりで、使い始めようとしています。私が試してみたいのは、ページの上部にクエリ フォームを配置し、ユーザーが [送信] を押すと、クエリ フォームの下の YUI DataTable に結果が表示されることです。

もちろん、通常は HTML フォームでユーザーが [Submit] を押すと、リクエストがサーバーに送信されます。Struts を使用してそれを処理し、リクエストを JSP に転送すると、HTML がブラウザに返されます。それが私が日常的にしていることです。Ajax では、代わりに XML を返さなければならないという点で違いがあることは理解しています。問題ない。簡単にできます。

私が持っている質問は、物事の YUI 側を扱っています。[送信] ボタンを押すと、何が起こりますか? 通常のフォーム送信ではありませんよね？データを取得するために YUI DataSource をトリガーする onSubmit() JavaScript 関数を実装する必要がありますか? リクエストパラメータはどのように渡されますか? リクエストを手動で作成する必要がないことを願っています。私は YAHOO.util.XHRDataSource を使用していると推測しており、それが DataTable の DataSource です。

HTML テーブル要素を使用して YUI DataTable を機能させることができました。あとは実際のデータに切り替えるだけです。不思議なことに、YUI のドキュメントは、私が何かを見逃していない限り、ここでは少し弱いようです。これは、YUI ドキュメントでカバーされていない基本的な Ajax に過ぎないのでしょうか?

4

1 に答える 1

3

まず第一に、Ajax を使用する場合、サーバーから XML を返す必要はありません。プレーン テキスト、XML、JSON 文字列、文字通り任意の形式のテキスト データを返すことができます。Datatable に JSON データを入力する 1 つの例を次に示します。

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 コードに "basic" の ID を持つ "div" コンテナーが必要です。これは、DataTable の最初のパラメーターと一致することに注意してください。

お役に立てれば

于 2009-03-17T18:44:39.487 に答える