[英]How to load external page/content into a DIV
这是我的问题:
我确实创建了一个菜单/动作列表(如果使用接受数据源的控件(如listview甚至带有模板化列的Gridview)进行控件,这会更容易)。
每个操作都需要特定的形式进行计算,而我已经在单独的aspx页面中创建了所有这些形式。
问题是:当我在列表中选择任何操作而不刷新页面或不使用iframe时,将这些页面/表单加载到div中的最佳方法是什么?
使用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);
});
});
});
这正是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。
彼得
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.