所以，我试图创建一个Spring MVC应用程序，如"Cinema"应用程序。我使用RestController与Get方法，产生JSON的响应。
private SessionService sessionService;
public SessionController(SessionService sessionService) {
this.sessionService = sessionService;
}
@GetMapping(value = "/test")
public String getSearchField() {
return "sessionsSearching";
}
@GetMapping(value = "/search", consumes = MediaType.ALL_VALUE, produces = MediaType.APPLICATION_JSON_VALUE)
public @ResponseBody
String searching(@ModelAttribute("filmName")String request) {
List<Session> serviceResponse = sessionService.searchByRequest(request);
JSONArray sessionsJson = new JSONArray();
for (Session s : serviceResponse) {
JSONObject filmJson = new JSONObject();
filmJson.put("name", s.getFilm().getTitle());
JSONObject sessionJson = new JSONObject();
sessionJson.put("id", s.getId());
sessionJson.put("dateTime", s.getDate());
sessionJson.put("film", filmJson);
sessionsJson.add(sessionJson);
}
return sessionsJson.toJSONString();
}
我想搜索会话和电影没有重定向。我正在尝试用jQuery创建Ajax
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" >
$(document).ready(function () {
$("#submitRequest").submit(function (e) {
e.preventDefault();
let url = $(this).attr('action');
$.ajax({
type: "GET",
url: url,
dataType: "json",
data: {filmName: $("#filmName").val()},
success: function (data) {
display(data);
}
});
})
})
</script>
<form action="/sessions/search">
<input name="filmName" type="text" placeholder="Search...">
<input type="submit" id="submitRequest">
</form>
<div>
<p id="result"></p>
</div>
</body>
当我加载html页面,把"Avatar"(例如)在搜索字段-我重定向到http://localhost:8080/sessions/search?filmName=Avatar与json字符串页面
请帮助。
首先，您不能使用相同的<script>标签来导入jQuery并放置您的自定义Javascript。
您必须使用两个单独的<script>标签。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" ></script>
<script type="text/javascript"> // Here comes your custom JS code </script>
其次，您没有提交按钮。您必须为表单提交操作编写脚本。
$("#myForm").submit(function (e) {
e.preventDefault();
let url = $("#myForm").attr('action');
$.ajax({
method: "get",
url: url,
dataType: "json",
data: {filmName: $("#filmName").val()},
success: function (data) {
display(data);
}
});
});
:
由于您正在触发AJAX调用，而不是重新加载页面，因此您可以向表单添加一个简单的按钮，并将代码编写到按钮单击函数中，而不必冒在某些浏览器中重新加载的风险。
<button id="submitRequest">SUBMIT</button>
$("#submitRequest").click(function (e) { // Button click functions });