2

シナリオ

私は Web アプリケーション (私の場合は MVC) を作成しています。特定のコンテナーを get 要求からの応答で更新する必要があります。要素をフィルター処理し、応答から要素を見つけて元のコンテナーに配置したい場合があります。

どうすればいいですか？

4

1 に答える 1

3

コンテンツを部分的に非同期に更新する必要があるときに、Web アプリケーションを構築していました。

だから私はあなたのニーズにも合うかもしれない機能を思いついた.

基本的には、提供された url に対して get 要求を実行します。標準の jQuery コールバックonSuccess、 、onErrorおよびonCompleteがあり、結果に対して filter() および find() を実行したり、応答を配置するコンテナーを指定したりできます。

ページにこれがあるとします。

<div id="myContentWrapper">
    <div class="myContent">
        <h1>This is the content I want to update.</h1>
    </div>
</div>

そして、リクエストのレスポンスはこれを返します:

<html>
    <!-- some html -->
    <div id="filterId">
        <div class="findClass">
            <h1>This is the content I want to inject!</h1>
        </div>
    </div>
    <!-- some more html -->
</html>

myButtonこれで、関数をクリック イベントに配線して更新できます。

$("#myButton").click(function () {
    loadContent("/Controller/Action", //url
    "#filterId", ".findClass", //filter & find
    "div#myContentWrapper div.myContent", //container to update
    function () { //success callback
        alert('Success!');
    }, function () { //error callback
        alert('Error :(');
    }, function () { //complete callback
        alert('Complete');
    });
});

簡単です。関数が残りの作業を行います。

function loadContent(url, filter, find, container, 
                     onSuccess, onError, onComplete) {
    var htmlResult;
    $.ajax({
        url: url,
        type: "GET",
        success: function (data) {
            htmlResult = data;
            if (onSuccess && typeof onSuccess == "function") {
                onSuccess.call(this);
            }
        },
        error: function () {
            htmlResult = "<h1>An error occurred!</h1>";
            if (onError && typeof onError == "function") {
                onError.call(this);
            }
        },
        complete: function () {
            if (filter != null) {
                if (find != null) {
                    $(container).html(
                        $(htmlResult).filter(filter).find(find).html());
                } else {
                    $(container).html($(htmlResult).find(find).html());
                }
            } else {
                $(container).html(htmlResult);
            }
            if (onComplete && typeof onComplete == "function") {
                onComplete.call(this);
            }}});}

応答で何かをフィルタリングしたり見つけたりしたくない場合は、次のようにすることができます。

loadContent("/Controller/Action", null, null, 
"div#myContentWrapper div.myContent", 
function() {
    alert('Success!');
}, function () {
    alert('Error :(');
}, function () {
    alert('Complete');
    });

あるいは、コールバックは必要ないかもしれません:

//This is the basic function call, these parameters are required
loadContent("/Controller/Action", null, null, 
    "div#myContentWrapper div.myContent", 
    null, null, null);

これで、必要なコンテンツを非同期で簡単に更新できるようになりました。必要に応じて自由に微調整してください。また、リクエスト タイプのパラメーターを使用して GET または POST を実行したり、loading表示できるように画像コンテナーの IDを追加したりすることもできます。関数を入力し、$.ajax の完全なコールバックで非表示にすると。

于 2012-08-10T13:50:01.863 に答える