如何將外部頁面/內容加載到DIV中

Question

這是我的問題：

我確實創建了一個菜單/動作列表（如果使用接受數據源的控件（如listview甚至帶有模板化列的Gridview）進行控件，這會更容易）。

每個操作都需要特定的形式進行計算，而我已經在單獨的aspx頁面中創建了所有這些形式。

問題是：當我在列表中選擇任何操作而不刷新頁面或不使用iframe時，將這些頁面/表單加載到div中的最佳方法是什么？

Answer 1

使用jQuery （據我了解，您的操作是指向表單的鏈接）：

$(document).ready(function() {
    $('a.yourActionClass').click(function(event) {
        event.preventDefault();
        var url = $(this).attr('href');
        $.get(url, function(response) {
            $('div#yourDivForForm').html(response);
        });
    });
});

要么

$(document).ready(function() {
    $('a.yourActionClass').click(function(event) {
        event.preventDefault();
        var url = $(this).attr('href');
        $('div#yourDivForForm').load(url);
    });
});

添加：

如果您返回帶有表單的“完整” ASPX頁面：

$(document).ready(function() {
    $('a.yourActionClass').click(function(event) {
        event.preventDefault();
        var url = $(this).attr('href');
        $.get(url, function(response) {
            var page = $(response);
            var form = $('form', page);
            $('div#yourDivForForm').prepend(form);
        });
    });
});

Answer 2

這正是Ajax的目的。 首先創建一個XMLHttpObject並使用它打開一個URL

</ s> </ s> </ s>

var req;

    function loadXMLDoc(url) {
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url);
        req.send(null);
        // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url);
            req.send();
        }
    }

}

響應將通過processReqChange事件處理程序返回。

function processReqChange() {
    // only if req shows "complete"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            // process the result
            document.getElementById("mydiv").innerHTML = req.responseText;
        } else {
            alert("There was a problem retrieving the XML data:\n" + req.statusText);
        }
    }
}

只需將“ mydiv”替換為您要填充的div的ID。

彼得