0

我使用 jQuery 构建了一个简单的模式，它接受一个 url，然后使用 ajax 方法加载它，并将响应 html 插入到我在模式框设计中显示在屏幕上的 div 中。简单的东西！

然而，这些页面是实际的 url，例如domain.com/posts/add，可以通过浏览器直接访问，而不仅仅是单击应用程序中的链接。即使用户在地址栏中键入 url，我也希望它们始终以模式显示。目前我这样做是为了如果请求不是 Ajax 则将它们重定向到主页或显示 404 以防止这种情况发生。

如果用户直接通过 HTTP 访问它们，我更愿意在模式中加载这些页面，就像 Chrome 商店那样，例如https://chrome.google.com/webstore/detail/pjkljhegncpnkpknbcohdijeoejaedia

我该怎么做呢？无需做一些非常混乱的javascript？任何想法或建议将不胜感激。请注意，这应该像一个适当的应用程序一样工作，因为它允许用户使用来回按钮，并且模式应该出现和消失

至于我使用的模态代码......

它真的很简单，这是它的外观示例（注意我的比这更健壮，代码纯粹是为了简单起见）

$('.ajax-link').click(function(e){

e.preventDefault;

$.ajax({

url: $(this).attr('href'),
success: function(response) {
$('<div id="modal">' + response + '</div>').appendTo('body');
}
});

});

4

3 回答 3

0

首先，我会使用.get()代替。

其次，如果您使用来自另一个域的完整 url，很可能是由于上面链接中提到的安全问题：

由于浏览器安全限制，大多数“Ajax”请求都受同源策略的约束；请求无法从不同的域、子域或协议成功检索数据。

除非你正在使用JSONP，我怀疑你是。

于 2012-06-27T00:04:03.697 回答
0

Okies 想出了如何做到这一点：

它需要一个 MVC 框架才能正确执行此操作 IMO，因为由于它们的静态特性，我无法看到老式页面是如何实现的，但基本上这个想法是您的视图必须从其他视图继承，例如：

您有两个视图：人员列表和用于添加人员的表单。然而，它们都继承自另一个视图，例如列表或模式，因此当用户使用 HTTP 请求添加人员时，它会加载表单但使用继承的列表，因此它会创建所需的效果。因此，逻辑都在控制器中完成。

这里有一篇关于继承的精彩文章：http: //mark-story.com/posts/view/view-inheritance-in-cakephp for CakePHP，这是我使用的另一个框架。

希望这对其他想要尝试的人来说是有意义的，但只是尝试了一下，它就像一种享受！

更新：在考虑了更多之后，我决定继承比需要的复杂得多，并且没有完全复制模态，因为让模态出现在 DOM 的底部需要......很多复杂视图中的结构！

我的替代计划是在控制器中进行 XMLHttp 检查，如果没有，则在列表视图中加载，而不是在表单中加载查询字符串或类似 JSON 的内容，然后使用 AJAX 从 url 加载到预期的视图中。这听起来像是对您应该获得的同一页面的双重请求，但它确实完成了工作。

唯一的问题是您不能同时发送视图和 JSON，告诉它在另一个视图中加载到模态中......有什么想法吗？除了传递查询字符串？

更新：2

我想得越多，做继承似乎更好，因为据我所知，虽然使用 JSON 的方式实际上不可能做到这一点......

于 2012-06-27T00:45:10.627 回答
0

您是否考虑过使用主题标签或 url 变量来表示页面应如何加载？从我在 Google Chrome 中看到的所有模式窗口都在 detail 子目录中，而其他区域是类别或搜索。该窗口位置可能表示页面的显示方式。

于 2012-06-27T00:46:24.623 回答