Spring MVC-两次提供内容


问题内容

我一直在寻找有关如何将内容存储到我的网页上的指导的一周,因为两次分离的内容一次都可以使用Model或ModelAndView,但是如果用户再次与该页面进行交互,我希望它在页面上加载更多内容相同页面。

Java Spring后端方法Get works Post不能:

@RequestMapping(value = "explorer", method = RequestMethod.GET)
public String redirectExplorer(@RequestParam(value = "param1", required = false) String name, Model model) {
    if (name != null) {
        ApplicationContext context = new ClassPathXmlApplicationContext("Spring-Module.xml");
        OffenderDAO offenderDAO = (OffenderDAO) context.getBean("offenderDAO");
        Offender[] offenders = null;
        try {
            offenders = offenderDAO.requestOffenders(name);
        } catch (Exception e) {
            e.printStackTrace();
        }
        ((ConfigurableApplicationContext) context).close();
        model.addAttribute("offenderlists", offenders);
    }
    return "explorer";
}

@RequestMapping(value = "explorer", method = RequestMethod.POST)
public String selectionHandler(@RequestParam("offenderid") String text, Model map) {
    String offenderID = text.trim();
    System.out.println("requested more info for: " + offenderID);
    Offender offender = null;
    ApplicationContext context = new ClassPathXmlApplicationContext("Spring-Module.xml");
    OffenderDAO offenderDAO = (OffenderDAO) context.getBean("offenderDAO");
    try {
        offender = offenderDAO.findOffenderById(offenderID);
    } catch (Exception e) {
        e.printStackTrace();
    }
    ((ConfigurableApplicationContext) context).close();
    map.addAttribute("selectedOffender", offender);
    return "explorer";
}

好的,这样您就可以看到GET方法加载了一个列表,用户可以与之交互,该列表将向显示的其他方法发送响应。问题是,即使收到了帖子并且响应中已有数据(由println确认),网页也不会更新。

这是负责上述模型更改的JSP代码。

<ul class="result-class">
            <c:forEach var="offender" items="${offenderlists}">
                <li><div class="result-div">
                        <div class="result-img-holder">
                            <img class="lazy" src=<c:out value="${offender.linkToPicture}"/>
                                height="120" width="120" /> <span class=result-div-titles>
                                OffenderID: </span>
                            <c:out value="${offender.offenderId}" />
                        </div>
                        <div class="result-div-oinfo">
                            <ul class="info-list1">
                                <li><span class=result-div-titles> First Name: </span> <c:out
                                        value="${offender.firstName}" /></li>
                                <li><span class=result-div-titles> Last Name: </span> <c:out
                                        value="${offender.lastName}" /></li>
                                <li><span class=result-div-titles> Middle Name: </span> <c:out
                                        value="${offender.middleName}" /></li>
                                <li><span class=result-div-titles> DOB: </span> <c:out
                                        value="${offender.DOB}" /></li>
                                <li><span class=result-div-titles> Sex: </span> <c:out
                                        value="${offender.sex}" /></li>
                                <li><span class=result-div-titles> Risk Level: </span> <c:out
                                        value="${offender.riskLevel}" /></li>
                                <li><span class=result-div-titles> Designation: </span> <c:out
                                        value="${offender.designation}" /></li>
                            </ul>
                            <ul class="info-list2">
                                <li><span class=result-div-titles> Race: </span>
                                <c:out value="${offender.race}" /></li>
                                <li><span class=result-div-titles> Ethnicity: </span>
                                <c:out value="${offender.ethnicity}" /></li>
                                <li><span class=result-div-titles> Hair Color: </span>
                                <c:out value="${offender.hairColor}" /></li>
                                <li><span class=result-div-titles> Eye Color: </span>
                                <c:out value="${offender.eyeColor}" /></li>
                                <li><span class=result-div-titles> Glasses: </span>
                                <c:out value="${offender.correctiveLens}" /></li>
                            </ul>
                            <div class="result-address">
                                <span class=result-div-titles> Primary Address: </span><br>
                                <c:out value="${offender.primaryAddress.address_line1}" />
                                <br>
                                <c:out value="${offender.primaryAddress.city}" />
                                , New York
                                <c:out value="${offender.primaryAddress.zipcode}" />
                            </div>
                        </div>
                    </div></li>
            </c:forEach>
        </ul>


<div id="wide-sidebar">
            First Name: <c:out value="${selectedOffender.firstName}"/>
            <div id="vehicles-sidebar">
                <h1>Vehicles Registered:</h1>
                <ul>
                    <c:forEach  items="${selectedOffender.currentVehicles}" var="vehicle">
                        <li>
                        <span><c:out value="${vehicle.plate}"/></span>
                        <span style="margin:10px;">something1<c:out value="${vehicle.state}"/></span>
                        <span style="margin:10px;"><c:out value="${vehicle.color}"/></span>
                        <span style="margin:10px;"><c:out value="${vehicle.make}"/></span>
                        <span style="margin:10px;"><c:out value="${vehicle.model}"/></span>
                        <span style="margin:10px;"><c:out value="${vehicle.year}"/></span></li>
                    </c:forEach>
                </ul>
            </div>

问题回顾 我有两个列表,它们基于一页上的用户交互而彼此分开加载。一个列表加载,而另一列表则不加载。这不是代码,我只是缺少一些东西…没有错误

目标
这里的目标是从数据库中加载选项列表,然后用户可以选择一个选项来加载另一半网页。但请注意,问题在于选择加载正常,但其余网页加载不了。如果我先加载网页的其余部分,则可以正常工作,但随后在请求时不会加载列表。


问题答案:

因此,我不得不制作一个新的JSP并使用一个iframe …这个想法是受Spotify网络播放器大声笑启发的;)

这是我使用iframe的方式

<iframe src="wideSidebar" id = "wide-sidebar"></iframe> 
<script>
    $(document).ready(function() {
        $('.result-div').click(function() {
            $(this).fadeOut(1000).fadeIn(200);
            var text1 = $(this).parent().text().split(":")[1].split("\n")[1];
            $("#wide-sidebar").attr("src", "wideSidebar?id="+text1);
            $("#wide-sidebar").css("display", "block");
        });
    });
</script>
@RequestMapping(value = "wideSidebar", method = RequestMethod.GET)
    public ModelAndView getSideBar(@RequestParam(value = "id", required = false) String name) {
        ModelAndView map = new ModelAndView("wideSidebar");
        if (name != null) {
            String offenderID = name.trim();
            System.out.println("requested more info for: " + offenderID);
            Offender offender = null;
            ApplicationContext context = new ClassPathXmlApplicationContext("Spring-Module.xml");
            OffenderDAO offenderDAO = (OffenderDAO) context.getBean("offenderDAO");
            try {
                offender = offenderDAO.findOffenderById(offenderID);
            } catch (Exception e) {
                e.printStackTrace();
            }
            ((ConfigurableApplicationContext) context).close();
            map.addObject("selected", offender);
        }
        return map;
    }

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
First Name: <c:out value="${selected.firstName}"/>
            <div id="vehicles-sidebar">
                <h1>Vehicles Registered:</h1>
                <ul>
                    <c:forEach  items="${selected.currentVehicles}" var="vehicle">
                        <li>
                        <span><c:out value="${vehicle.plate}"/></span>
                        <span style="margin:10px;"><c:out value="${vehicle.state}"/></span>
                        <span style="margin:10px;"><c:out value="${vehicle.color}"/></span>
                        <span style="margin:10px;"><c:out value="${vehicle.make}"/></span>
                        <span style="margin:10px;"><c:out value="${vehicle.model}"/></span>
                        <span style="margin:10px;"><c:out value="${vehicle.year}"/></span></li>
                    </c:forEach>
                </ul>
        </div>
</body>
</html>