初步想法(在创建解决方案之前)
Use POST http://www.jmarshall.com/easy/http/#postmethod对于大数据而不是 GET。对于 POST,不会将查询字符串用于数据,因此 URL 长度限制不是问题。 (最大 URL 长度因浏览器而异,因此在大量数据移动时远离它是正确的)。
特殊的 URL 字符可以是encoded http://www.jmarshall.com/easy/http/http_footnotes.html#urlencoding在查询字符串中传递,这样就不会出现问题。
或者,您可以将第一页的数据存储在服务器端,并让第二页从服务器端获取数据。但这太过分了。它使您进行不必要的服务器编程。
通过 HTTP 调用传递状态是标准做法。你不应该试图规避它。与它一起工作。所有设施都是为您内置的。现在只需要 jQuery 来为我们提供一些帮助......
Note: 当心使用 jQuery 来实现主要应用程序功能,以防浏览器中禁用 JavaScript。在大多数情况下,即使 JavaScript 被禁用,您的 Web 应用程序也应该可以在基本级别上使用。工作完成后,在 JavaScript/jQuery 上分层以使体验变得更好,甚至很棒。
编辑:解决方案(使用 ASP.NET 处理)
解决方案实施的关键资源包括:
-
How use 从 jQuery 发布 http://docs.jquery.com/Ajax/jQuery.post- 发起请求,传递参数,获取响应
-
jQuery 上下文论证 http://docs.jquery.com/Core/jQuery- 这就是从主窗口访问/影响弹出窗口 DOM 的方式
怎么运行的:从主页进行 POST,结果显示在弹出窗口中。它按以下顺序发生:
- 主脚本打开一个弹出窗口(如果它尚不存在)
- 主脚本等待弹出窗口完全初始化
- 主脚本 POST(使用 AJAX)参数到另一个页面(发送请求)
- 主脚本接收响应并将其显示在弹出窗口中。
实际上,我们已将数据发布到弹出窗口并将参数传递给处理。
接下来的三页构成了完整的解决方案。我的桌面上有这 3 个工具,它可以在 Google Chrome 稳定版本 3.0.195.38 中运行。其他浏览器未经测试。你还需要jquery-1.3.2.js http://docs.jquery.com/Downloading_jQuery坐在同一个文件夹中。
main_page.html
这是您提供的逻辑的扩展。示例使用链接而不是表单按钮,但它具有相同的功能id=sourcePageBtn
.
此示例在 POST 发生时传递两个键/值对(仅作为示例)。您将在此处传递您选择的键/值对。
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
</head>
<body>
<a id="sourcePageBtn" href="javascript:void(0);">click to launch popup window</a>
<script>
$(function() {
$('#sourcePageBtn').click( function() {
// Open popup window if not already open, and store its handle into jQuery data.
($(window).data('popup') && !$(window).data('popup').closed)
|| $(window).data('popup', window.open('popup.html','MyPopupWin'));
// Reference the popup window handle.
var wndPop = $(window).data('popup');
// Waits until popup is loaded and ready, then starts using it
(waitAndPost = function() {
// If popup not loaded, Wait for 200 more milliseconds before retrying
if (!wndPop || !wndPop['ready'])
setTimeout(waitAndPost, 200);
else {
// Logic to post (pass args) and display result in popup window...
// POST args name=John, time=2pm to the process.aspx page...
$.post('process.aspx', { name: "John", time: "2pm" }, function(data) {
// and display the response in the popup window <P> element.
$('p',wndPop.document).html(data);
});
}
})(); //First call to the waitAndPost() function.
});
});
</script>
</body>
</html>
弹出窗口.html
这是从主页定位的弹出窗口。您将在主页的 jQuery 脚本中看到对 popup.html 的引用。
这里有一个“技巧”需要设置window['ready'] = true
当弹出窗口 DOM 最终加载时。主脚本不断检查并等待,直到该弹出窗口准备就绪。
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
</head>
<body>
<!-- The example P element to display HTTP response inside -->
<p>page is loaded</p>
</body>
<script>
$(function() {
window['ready'] = true;
});
</script>
</html>
process.aspx.cs(C# - ASP.NET process.aspx 页面)
参数由主页脚本 POST 到动态服务器页面。
AJAX 参数到达页面请求 http://msdn.microsoft.com/en-us/library/system.web.ui.page.request.aspx收藏。
在此示例中,输出以纯文本形式传回,但您可以根据应用程序要求自定义响应。
public partial class process : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
// Access "name" argument.
string strName = Request["name"] ?? "(no name)";
// Access "time" argument.
string strTime = Request["time"] ?? "(no time)";
Response.ContentType = "text/plain";
Response.Write(string.Format("{0} arrives at {1}", strName, strTime));
}
protected override void Render(System.Web.UI.HtmlTextWriter writer) {
// Just to suppress Page from outputting extraneous HTML tags.
//base.Render(writer); //don't run.
}
}
结果通过原始/主页显示在弹出窗口中。
所以弹出窗口的内容被覆盖"[name] arrives at [time]"
主要参考资料:HTTP 变得非常简单 http://www.jmarshall.com/easy/http/, jQuery Ajax 成员和示例。 http://docs.jquery.com/Ajax