Ajax如何将spring mvc的视图发送到div中

时间:2014-04-26 05:43:15

标签: ajax spring jsp html view

在我提出下一个问题之前,让我先解释一下我的项目。

我的网站现在运行良好。它基本上是一个信息发布网站,这意味着主要有很多静态html页面。

应用程序环境是: Tomcat 7.0.51 Mac OS X服务器(3.1.1)上运行。

应用程序在Spring 3.1.1 中开发, STS 3.5

业务应用程序包含两部分:

第1部分 内部运营应用。这一个完成,主要业务功能在这里。业务功能包括:

  • 商业/产品提供
  • 客户
  • 合同
  • 付款/发票系统

以上运行正常。但是这部分应用程序没有任何控制访问权限。它在防火墙内部工作,不可公开访问。

第2部分 商业发布应用程序,与同一个tomcat服务器部署为另一个应用程序名称,此部分通过公开公开端口80 上的 AJP / Apache 服务器,可公开访问。此部分目前有大约23个html页面,嵌套有divsiframes,应用程序视图是经典 Header-LeftMenu-Content-Footer 样式。标题,LeftMenu,内容和页脚是单独的HTML页面。内容由位于LeftMenu面板中的按钮注入。

经过一段时间的运行,我们发现我们的客户希望在我们的网站上留下一些信息甚至注册他们的信息并在线申请商家,这就是为什么我要更新它动态Web应用程序

由于业务逻辑已经完成,我根本不需要重做它,只需带上我的内部业务逻辑和访问控制机制,让客户注册他们的兴趣并在线申请业务,而无需更改业务发布。所以所有静态html都会保持不动。

我通过我的Spring MVC控制器通过Ajax调用完成了客户登录/注销,会话管理逻辑,现在,我正计划通过来自html页面的Ajax调用来引入业务逻辑。

我确实调用了ajax与业务逻辑控制器通信,控制器可以设置我的UI模型并将JSP句柄返回给Ajax调用者。 JSP也被调用(我从catalina.out中找到了调试信息)。我正在尝试发送JSP内容来呈现特定的div,例如" Content",但我还没有得到它。

根据我的理解,当我从html调用ajax时,我的MVC控制器可以设置我的视图并将JSP句柄作为返回值传递给ajax,我可以将该JSP句柄作为参数发送给ajax success函数,但是不幸的是,从这一点来说,我失去了控制权,因为JSP是MVC的观点,并且它不会向调用者(Ajax)返回任何内容。

我对Ajax很新,我不知道如何让ajax将MVC的视图发送到其成功函数中的指定div。

有没有人有这种经验与我分享,任何建议都非常感谢。

来自澳大利亚的Cidy

3 个答案:

答案 0 :(得分:1)

从客户端使用jquery ajax功能将pov呈现为div非常容易。

在服务器端呈现响应取决于您正在使用的渲染框架。我不知道JSP是否支持渲染页面的片段,但是Thymeleaf例如为您处理这个问题。您可以在模板中引用“any”标记并仅渲染此部分。

如果JSP不支持这种功能,您可以通过定义一个小页面模板来解决这个问题,该模板仅包含您在此请求期间要呈现的内容。

编辑:快速参考div替换:

Ajax调用不期望任何特定类型,只是响应。如何处理该响应的内容取决于您在javascript端的代码。看看这里:JQuery: replace DIV contents with html from an external file. Full example?

你调用spring控制器,它返回一个html响应并将它注入div。

答案 1 :(得分:1)

我找到了解决问题的解决方案。希望它可以帮助任何其他人在他们的ajax电话上遇到同样的问题。

关键解决方案是:控制器必须通过相应的视图名称设置ModelAndView,并且视图必须链接到正确的JSP。我的控制器看起来像:

/*Added for ajax call response function*/
@RequestMapping(value="/testControllerURL") 
public ModelAndView testControllerURL(ModelMap model) throws Exception {
    String custSequence=getCustomerIdSequence(thsssequenceDAO);
    model.addAttribute("CustSequence",custSequence);
    model.addAttribute( "user", "Joe Dirt" );
    System.out.println("ajax text controller url called.");
    ModelAndView mav = new ModelAndView();
    String viewName = "jsp/ajaxCall";
    mav.setViewName(viewName);/*create a ModelAndView by given View Name*/
    return mav;
}

我的ajax功能如下:

<script type="text/javascript"> <!-- get login information from controller -->
function createCustomer() {
var contextPath=window.location.pathname;
console.log("Context Path: "+contextPath);
console.log("createCustomer called.");
$.ajax({
    contentType: "application/json; charset=utf-8",
    url: 'testControllerURL',
    data: ({name : "me"}),
    success: function(data) {
        var elem = document.getElementById('#sign_in');
        console.log(elem.ATTRIBUTE_NODE);
        console.log(data);
        <!-- $('#sign_in').load($(data).attr('href')); -->
        <!-- $('#content-container').load(data); -->
        $('#sign_in').html(data);
    }
  });
}
</script>

ajax调用将获取从MVC生成的JSP的输出,并将其显示在指定的div中。

我希望这个可以帮助任何正在寻找解决方案的人。

答案 2 :(得分:0)

在您的Controller返回表示特定调用数据的JSON字符串然后成功javascript函数使用该数据并填充使用类似工具构建的前端模板的情况下通常会执行的操作mustacheHandlebars。填充模板后,可以将DOM附加到DOM。

请注意,我所描述的流程中没有任何地方可以使用View。当您需要服务器端模板时,即需要设置初始调用时,将使用视图。 你可以找到一种方法来运行JSP并发送它的结果,但我建议你不要走那条路