5

我们有一个使用 jquery 的 Web 应用程序。我们必须添加一个将在弹出窗口中打开的新模块。然后该模块中的所有页面将使用 ajax 在同一个弹出窗口中打开。

我们将有诸如添加/编辑/列表/搜索页面之类的页面。我们希望将这些页面加载到同一个弹出窗口中。

这是否可以在弹出窗口中进行页面转换。我们正在使用弹簧 MVC。

编辑 1

就像您单击菜单中的链接一样，它将打开一个弹出窗口。弹出窗口将有更多按钮，这些按钮将进入新屏幕，但在同一个弹出窗口中。我使用 ajax 来更新屏幕的一小部分。我曾经为此使用 div 和 spans。但是我们如何将整个弹出页面替换为具有许多 html 组件的全新页面。

就我使用 ajax 而言，当您进行远程调用时，服务器端方法会返回一些数据对象作为 json 作为响应，这些数据对象可用于客户端更新页面的某些区域。

我们可以返回整个页面作为服务器端的响应吗？

请帮忙。

4

8 回答 8

2

AJAX 可以通过两种方式工作：

  • 返回用于更新页面内容的 json 对象
  • 返回用于替换页面内容的html

如果您使用 AJAX 替换整个页面，那么该页面内的任何链接也将需要使用 AJAX 来执行相同的操作。

一种更简单的方法可能是使用 iframe 覆盖，然后可以让内容像普通页面一样。因此 iframe 中的链接将像普通链接一样工作，但只会更新 iframe 区域。

于 2013-05-25T19:44:15.620 回答
1

只需请求标准页面，您就应该能够使用 AJAX 获取整个页面。然后你就可以做popup.document.documentElement.innerHTML = newHTML，newHTML从服务器返回的 HTML 在哪里。

于 2013-05-25T10:23:40.483 回答
1

据我所知，如果您替换整个弹出窗口，它就不再是真正的 AJAX 了。据我所知，仅使用新 url 更新先前定义的弹出窗口的常规 javascript 将是更改在不同窗口中发生的事情的唯一方法。

除非您将“弹出”窗口创建为页面中的 div，从而消除各种浏览器安全问题（许多浏览器禁止您在另一个窗口中动态更改内容）。这样您就可以使用 AJAX 更改该 div 的全部内容。使用 css 可以将 div 实现为选项卡或虚拟弹出窗口。

祝你好运

于 2013-05-30T08:25:03.060 回答
1

对于 JQuery 观点，您可以使用 .html() 替换来自服务器的 html，因为大多数答案都提到了它。

对于 Spring MVC：有一个主要组件可以为 spring mvc 解析视图，称为视图解析器，您可以在 spring 参考文档中查看它，它负责将您的视图从字符串或 ModelAndView 解析到表示层，可以是 JSP、JSL、Velocity ,FreeMarker 或其他表示框架，然后一旦您返回带有视图名称的字符串或 ModelAndView 包含视图名称，它将被解析为在大多数情况下会生成 HTML 的视图框架，但是如果您想返回 JSON 或 XML，您必须使用@ResponseBody 覆盖视图解析器的行为和响应，并根据嵌入的转换器在正文中返回方法

于 2013-05-28T07:17:27.847 回答
1

您的控制器可以返回 JSON（但您将需要某种模板 - 如下所述 - 能够仅填充值。或者让您的控制器返回 html 并通过 javascript 替换您需要的页面部分。

在您的 html 中，您可以执行以下操作：

<div id='loader'>Loading...</div>
<div id='popup'>This will be replaced</div>
<header></header>
<nav></nav>
<secton id='content'></section>
<footer></footer>

确保将这两个 div 隐藏在你的 CSS 中：div#loader, div#popup { display: none; }

将z-index加载程序的 设置为小于z-index弹出窗口的 。

在你的标签中设置一个属性a来指定每个标签是否应该打开一个弹出窗口：

<a href='your/url' data-pops>Click me</a>

现在将所有这些锚点单击事件绑定到一个函数来处理这个问题：

$('a[href]').click(function() {
    var self = this;
    var url = $(self).attr('href');

    if($(self).attr('data-pops')) {
        showPopup(url);
    } else {
        loadContentPartial(url);
    }
});

如果该data-pops属性存在，它将showPopup从锚点调用具有指定 url 的函数。否则，它将执行对loadContentPartial此处命名的函数的调用，您可以更新您的内容。

您的showPopup函数可以执行以下任务：

  • 显示装载机。
  • 执行一个$.get.
    • 如果您的 get 仅返回 json（我建议您使用 knockoutjs - 一个 mvvm 框架）
    • 如果您的 get 返回原始 html：当 get 完成后，将弹出 div 的内容替换为从$.get.
  • 不要隐藏加载程序并显示弹出窗口。（加载器图像/图标/文本将不可见，因为弹出窗口将在其上方 - 保持灰色覆盖以避免用户交互）

您的loadContentPartial函数应该执行与显示弹出窗口几乎相同的任务，不同之处在于它应该替换您的部分内容然后隐藏加载程序。 注意这里有点作弊，您可以执行整个页面请求，在这里将返回的内容替换为当前页面内容，您的请求会更大一些，但现在返回 30k 或 10k 并不是那么重要，如果你是当然，不是 Facebook。

现在：您可以从控制器编写 html，或者甚至更好地编写一些辅助方法来生成要返回的原始 html，包括表单、按钮、字段和您可能需要的所有内容。如果你选择使用 Knockout js，周围有几个教程，这里是Brad Wilson 在 NDC（挪威开发者大会）上记录的对我来说最好的教程。它非常易于使用、学习和实施。您可以将Handlebarsjs自己称为Minimal 类固醇模板，我从未使用过它，但这里是链接，K Scott Allen 在 Pluralsight 中有一个很棒的教程（像往常一样），称为ASP.NET MVC4 Fundamentals。

如果您有任何机会需要弹出窗口的加载器，您可以执行以下操作之一：

  • 更改z-index覆盖加载器的，然后在弹出窗口完成处理后将其更改回来。
  • 创建另一个覆盖加载器，例如div#popupLoader并设置一个z-index高于div#popup.
于 2013-06-01T05:11:46.003 回答
1

您可以使用 JQuery 执行类似的操作

  var request = $.ajax({
      type: "POST",
      url: "Call to Spring Controller", // Yii mvc would look like /myurl.com/action
      data: Spring controller parameters, // remove if you don't have parameters
      dataType: "html"
   });

   request.done(function(msg) {
         //if you have any elements you want to remove or hide, do it here.
         $("#main").html( msg );
   });

与此类似的 HTML 卡在您的弹出页面中

  <div id="main">

  </div>

然后在 $.ajax 调用完成后，div 将包含您通过 spring 传回的任何 HTML 代码。

于 2013-05-30T17:28:28.423 回答
1

根据我对 Spring MVC 的记忆，它使用 ModelAndView 返回视图，因此您所要做的就是使每个视图成为一个单独的 .JSP，然后创建一个控制器并设置各种 GET 方法来为每个 .JSP 提供服务（返回视图）。

就像是：

@Controller
public class MyController {

    @RequestMapping( method=RequestMethod.GET, value="/view1" )
    public ModelAndView getView1( Model model ) {
        model.addAttribute( "some attr", "some value" );
        return new ModelAndView( "view1" );
    }

     @RequestMapping( method=RequestMethod.GET, value="/view2" )
    public ModelAndView getView2( Model model ) {
        model.addAttribute( "some attr", "some value" );
        return new ModelAndView( "view2" );
    }

    (...)

}

然后在您的弹出窗口中，只需让每个菜单链接调用不同的视图（使用对前面提到的控制器的 ajax 调用）。

获得成功响应后，只需将响应的 html 转储到容器 div 中

$("#container").html( response );

附带说明一下，您可能必须配置 DispatcherServlet 以解析您使用 ModelAndView 返回的视图。

原则上这应该可以工作，我的 Java 技能充其量只是平庸，但它应该可以工作。

于 2013-05-25T20:37:47.863 回答
0

就我们应用程序中的相同问题而言，我们为 Jquery 使用了一个 fancybox 插件。如果您只想显示 HTML，则只需在其中发送 json 编码数据。 你可以从这里下载。您还可以传递要在弹出/花式框中显示的 URL。它可以像您在另一个网页中一样，您也可以在其中访问其他网络链接。

您所要做的就是将“fancybox fancybox.iframe”类添加到要显示弹出窗口和链接的 HTML 标记中。

这是一个相同的例子：

<div class="question"><a class="upload_link fancybox fancybox.iframe" href="http://localhost/4.0/utils/info/cust_id"></a></div>
于 2013-06-01T08:31:27.967 回答