尝试添加一个模型确认页面(继续/取消)，其中包含一些信息。
信息来自带有几个输入的表单...
我创建了一个小项目，我认为它说明了这个要求。
在提交之前，我想在模式页面中显示一个值，该值取决于在表单中输入的值。在这种情况下，我有 3 个输入来进行简单求和。
因此模态页面显示总和，用户可以决定是否继续。
这是项目的链接。我被困在 index.html jquery 部分。
[ https://github.com/davisoski/action-listener][1]
我认为这是正确的做法，但我无法做到这一点
[ https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/][2]
任何想法
更新 1
我有一个包含 3 个字段的简单表单。我有一个带有/saveform 后映射的 Controller ，此方法仅调用服务并求和。没问题。
<form action="#" th:action="@{/saveform}" th:object="${modelform}"
method="post">
<div class="form-group row">
<div class="col-12 col-md-6 col-lg-3">
<label class="col-form-label col-form-label-sm" for="value1">Value1</label>
<input class="form-control form-control-sm" th:field="*{value1}"
id="value1" type="text" />
</div>
</div>
<div class="form-group row">
<div class="col-12 col-md-6 col-lg-3">
<label class="col-form-label col-form-label-sm" for="value2">Value2</label>
<input class="form-control form-control-sm" th:field="*{value2}"
id="value2" type="text" />
</div>
</div>
<div class="form-group row">
<div class="col-12 col-md-6 col-lg-3">
<label class="col-form-label col-form-label-sm" for="value3">Value3</label>
<input class="form-control form-control-sm" th:field="*{value3}"
id="value3" type="text" />
</div>
</div>
<div class="form-group row">
<div class="col-12 col-md-6 col-lg-3">
<a data-toggle="modal" href="#myModal" class="btn btn-primary"><i
class="icon-plus-squared"></i><span>Calculate Sum</span></a> <a
data-toggle="modal" href="#myModal" class="btn btn-primary"
th:onclick="'javascript:openModal();'"><i
class="icon-plus-squared"></i><span>Calculate Sum2</span></a>
</div>
</div>
</form>
我想做的是在流程中间放置一个带有该总和的模态页面，以便用户可以决定是继续还是取消
我添加了一个这样的模型(请参阅 github 项目中的 index.html)，我看不到对方法或其他东西进行 previus 调用以在模型页面中显示 sum 值的方法。我曾经在 JSF 中使用 actionListeners 来做，但在这里我不知道该怎么做。 qtzar.com 的博客给了我一个想法
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">We have calculated the sum of
values</h5>
<button type="button" class="close" id="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you agree with this sum???</p>
</div>
<div class="modal-footer">
<!--
<a href="#" data-dismiss="modal" class="btn">Close</a> <a
href="#" class="btn btn-primary">Save changes</a>
-->
<button type="button" class="btn btn-primary btn-ok"
id="continue">Continue</button>
<button type="button" class="btn btn-danger"
data-dismiss="modal" id="cancel">Cancel</button>
</div>
</div>
</div>
</div>
更新 2
应该是这样的:
$(function() {
$.ajax({
url : "/sum",
success : function(data) {
$("#modalHolder").html(data);
$("#myModal").modal("show");
}
});
}
并在 Controller 中定义一个@RequestMapping
@RequestMapping("/sum")
但我看不到如何传递参数以及将返回值放到模态的何处
更新 3:
修改模态页面，添加th:fragment:
<!-- Modal -->
<div class="modal" id="personModal" role="dialog"
th:fragment="modalContents">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">We have calculated the sum of values</h5>
<button type="button" class="close" id="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you agree with this sum???</p>
<h4 class="btn" th:text="${sum}"></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-ok" id="continue">Continue</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"
id="cancel">Cancel</button>
</div>
</div>
</div>
</div>
在 Controller 中添加了两个方法，一个用于计算总和以显示在模态对话框中，另一个用于发送到服务器。
@PostMapping({ "/saveform" })
public String saveForm(Model model, RedirectAttributes ra) {
LOG.info("HomeController.saveForm");
//Simulate the sum
model.addAttribute("sum", "25");
return "/::modalContents";
}
@RequestMapping("/sum")
public String mySum(Model model) {
model.addAttribute("sum", "24");
return "/::modalContents";
}
I'm think I'm close, but I'm getting error 500.
[1]: https://github.com/davisoski/action-listener
[2]: https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/
最佳答案
我不确定这是否是您正在寻找的答案，因为它不会直接为您提供 Model 对象，但由于还没有人回答这个问题，我至少会为您提供一种获取请求参数的方法。
这是我前段时间写的一些代码的一部分，你可以使用@RequestParam来获取参数。 database/addUser 方法的示例请求是 database/addUser?id=12&bookingIds=1&bookingIds=11&name=Olafur&email=classified@nothere.com 您当然可以创建使用 ajax
此外，您是否只是简单地发送 Spring “/sum” 而没有任何数据。
如果这对您没有帮助，我真的很抱歉，所以在这种情况下请随意投反对票。我将在此处为您留下一段解释 @ReqeuestParam 语法的片段。 :)
@RestController
@RequestMapping(path="/database")
public class MainController {
@CrossOrigin
@GetMapping(path = "/addUser") // Map ONLY GET Requests
public @ResponseBody
String addNewUser(
@RequestParam(required = false) Long id,
@RequestParam(required = false) ArrayList<Long> bookingIds,
@RequestParam(required = false) ArrayList<Long> reviewIds,
@RequestParam String name,
@RequestParam String email
) {
UserEntity u = new UserEntity();
if(id != null) u.setId(id);
if(bookingIds != null) u.setBookingIds((Map<Integer, Long>) Converter.arrayListToMap(bookingIds));
if(reviewIds != null) u.setReviewIds((Map<Integer, Long>) Converter.arrayListToMap(bookingIds));
u.setName(name);
u.setEmail(email);
u = userRepository.save(u);
return u.getId().toString();
}
关于javascript - 提交前在模态页面中显示来自 Controller 的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50009491/