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>