dav*_*ski 6 javascript jquery spring-boot
尝试添加模型确认页面(继续/取消),其中包含一些信息.
信息来自一个带有几个输入的表格......
我创建了一个litte项目,我认为它说明了这个要求.
在提交之前,我想在模态页面中显示一个值,具体取决于在表单中输入的值.在这种情况下,我有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后映射的控制器,这种方法只需调用一个服务并进行求和.没问题.
<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),我无法看到对方法或其他东西进行普通调用以在模型页面中显示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");
}
});
}
并在控制器中定义@RequestMapping
@RequestMapping("/sum")
但我看不出如何传递参数以及将返回值放到模态的位置
更新3:
修改后的模态页面,添加了: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>
在控制器中添加了两个方法,一个用于计算在模态对话框中显示的总和,另一个用于发送到服务器.
@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();
}