如何使用jquery在弹出窗口中进行页面转换？

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

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

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

编辑1

就像你点击菜单中的链接，它会打开一个弹出窗口。弹出窗口将有几个按钮，这些按钮将进入新的屏幕，但在同一弹出窗口。我使用ajax更新了屏幕的一小部分。我以前用div和span来表示这个。但是我们如何用包含许多html组件的全新页面替换整个弹出页面呢

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

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

---

请帮忙

只需请求一个标准页面，就可以使用AJAX获得整个页面。然后您就可以执行

popup.document.documentElement.innerHTML=newHTML

，其中

newHTML

是从服务器返回的HTML。

AJAX可以以两种方式工作：

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

如果使用AJAX替换整个页面，那么该页面内的任何链接也需要使用AJAX来替换

---

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

根据我在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技能充其量只是平庸的，仍然应该行得通。

从JQuery的角度来看，您可以使用.html（）替换大多数答案提到的来自服务器的html

---

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

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

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

---

祝您好运

您可以使用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代码。

您的控制器可以返回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>

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

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

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

如果存在

data pops

属性，它将使用锚定中指定的url调用

showPopup

函数。否则，它将调用名为

loadContentPartial

的函数，您可以在此处更新内容

您的

showPopup

功能可以执行以下任务：

• 显示加载程序
• 执行

  $。获取
  。
  
  如果get只返回json（我建议您使用knockoutjs——一种mvvm框架）
  如果get返回原始html：完成get后，将弹出div的内容替换为从
  $.get
  返回的内容
  

• 不要隐藏加载器并显示弹出窗口。（加载器图像/图标/文本将不可见，因为弹出窗口将位于其上方-保持灰色覆盖以避免用户交互）

您的

loadContentPartial

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

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

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

<div class="question"><a class="upload_link fancybox fancybox.iframe" href="http://localhost/4.0/utils/info/cust_id"></a></div>