如何在 Spring MVC 中使用 AJAX 渲染视图

Posted 2023-02-26

【中文标题】如何在 Spring MVC 中使用 AJAX 渲染视图

【英文标题】：How to render a View using AJAX in Spring MVC

【发布时间】：2011-06-16 12:13:36

【问题描述】：

我正在使用 Spring MVC，我需要对服务器进行异步调用并只刷新页面的一部分。

我实际上拥有的是一个返回字符串的控制器。我使用 JQuery (.post()) 函数调用控制器。

我的解决方案的问题是我无法像使用 ModelAndView 作为返回类型时那样呈现 JSP。

有没有办法返回已经渲染的视图？

提前致谢。

纽基诺

【参考方案1】：

这个答案只是为了确认 axtavt 的答案有效。我花了一分钟才意识到他的建议，所以我想我会发布一个 code-sn-p 来帮助任何跟在我后面的人。不过，要向他致敬！ :)

MyController.java

@Controller
public class MyController 

    @RequestMapping( method=RequestMethod.GET, value="/mainView" )
    public ModelAndView getMainView( ... )         
        /* do all your normal stuff here to build your primary NON-ajax view
         * in the same way you always do
         */             
    

    /* this is the conroller's part of the magic; I'm just using a simple GET but you
     * could just as easily do a POST here, obviously
     */
    @RequestMapping( method=RequestMethod.GET, value="/subView" )
    public ModelAndView getSubView( Model model ) 
        model.addAttribute( "user", "Joe Dirt" );
        model.addAttribute( "time", new Date() );
        return new ModelAndView( "subView" );
    

ma​​inView.jsp

(...)

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    function doAjaxPost() 

        $.ajax(
            type: "GET",
            url: "subView",
            success: function(response) 
                $("#subViewDiv").html( response );
            
        );
    
</script>
<input type="button" value="GO!" onclick="doAjaxPost();" />
<div id="subViewDiv"></div>

(...)

subView.jsp

(...)

<h3>
    User Access Details
</h3>

<p>
    $user accessed the system on $time
</p>

(...)

就是这样！美丽的事物；到目前为止，在 Spring 中做 AJAX 一直是一个巨大的痛苦……解析大的@ResponseBody，通过在 JS 中连接东西来构建大量的 HTML……呃……我不敢相信这种方法是多么简单和真棒——直到现在才意识到！ :)

【讨论】：

太棒了！有了这个，我们基本上可以完全忘记 js，因为在需要时以 html 呈现的最终结果我们可以用来自 jsp 的所需块替换 div，我个人认为 jsp 比 jquery/js 代码更易于维护。一切伟大的事物通常都很简单。

太棒了....过去三天我一直在为使用 JS 吐出 HTML 内容而痛苦。这个解决方案很棒。感谢您的解释。我希望我能投票得更高。

因此问题及其答案必须真正设置为受保护状态。 ;-)

是的，还不错。它甚至是一个非常聪明的解决方案。我会说，这是解决方案：+1

很好的解释，只有一个问题。可以使用对话框/弹出窗口显示代码： $("#subViewDiv").html( response );

【参考方案2】：

您可以将这段页面放入一个单独的 JSP 中，并从您的方法中返回一个指向它的 ModelAndView。从那时起，AJAX 和非 AJAX 调用之间没有区别。

【讨论】：

我有与 OP 相同的要求，这听起来很有希望，但我并没有完全遵循...您能否详细说明，或链接到采用这种方法的教程？

我很笨。玩了一分钟后，它点击了你想要的。 :) 一旦我得到一些工作，我会在一分钟内完成一个简短的例子。