In this way. Originally, when you press the search button on the web page, you send the data through Ajax communicationgo It's a format that converts it into Json But I didn't even write printWrite The result is called like this and I can't see the view page...
If you send Ajax like that as below,
<%@pagelanguage="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn_search").click(function(){
//alert ("Click search button!");
var params = $("#formId").serialize();
$.ajax({
url:'movieFinder.com',
type:'POST',
dataType: "json",
data:params,
success:function(data){
/* /* var ajaxName = decodeURIComponent(data);
alert(ajaxName); */
alert(data);
var tr = $("<tr></tr>");
$.each(data,function(index,item){
var td = $("<td></td>")/* .css({
padding-right:"40px",
padding-bottom:"30px",
padding-left:"40px",
padding-top:"30px"
}) */;
var img = $("#tb.img").attr("src",item.m_image);
var lab = $("#tb_lab").text(item.m_name);
$(img).appendTo($(tr));
$(lab).appendTo($(tr));
$(tr).appendTo($("#result_table"));
if((index+1)%4 ==0){
}
});
},
error:function(){
alert("ajax communication failed!!!");
}
});
});
});
</script>
This is the part that I receive from the controller through Ajax communication, but I receive the data and return the str in json form, but what part is wrong and keeps popping up like a stomach capture? (Crying)
@Controller
@RequestMapping("/movieFinder.com")
public class MovieFinderController {
@Autowired
private MovieDao dao;
public void setDao(MovieDao dao) {
this.dao = dao;
}
@RequestMapping(method=RequestMethod.GET)
public void form(){
}
@RequestMapping(method=RequestMethod.POST,produces = "text/plain;charset=utf-8")
@ResponseBody
public String submit(String searchField,String keyword,String[] m_genre,String[] m_nation,String[] m_grade,String startyear,String endyear,HttpServletResponse response){
//ModelAndView mav = new ModelAndView();
//System.out.println ("The value passed by the controller: "+keyword");
//System.out.println ("startyear: "+startyear" by controller);
//System.out.println ("endyear: "+endyear" by controller);
List<MovieVo_j> list = dao.getMovieFinder(searchField, keyword, m_genre, m_nation, m_grade, startyear, endyear);
String str = "";
ObjectMapper mapper = new ObjectMapper();
try {
str = mapper.writeValueAsString(list);
} } catch (Exception e) {
System.out.println("first() mapper :: " + e.getMessage());
}
return str;
}
If you reduce the core of the sauce, it becomes like below:
<script type="text/javascript">
$(function(){
$("#btn_search").click(function(){
//alert ("Click search button!");
var params = $("#formId").serialize();
$.ajax({
url:'movieFinder.com',
type:'POST',
dataType: "json",
data:params,
success:function(data){
// // success
},
error:function(){
alert("ajax communication failed!!!");
}
});
});
});
</script>
<body>
<form id="formId" action="movieFinder.com" method="post">
<Button type="submit" class="btn-danger" id="btn_search"><b>search</b>
</form>
</body>
If you look at the type of button tag, it says submit. When you click the button tag, the HTML basic function, form submit, will be activated at the same time in addition to the click event.
To put it simply:
<script>
document.myForm.submit();
</script>
You can think of it as this. HTml's submission and JavaScript's submission are technically different, but... Anyway, I think you know that this is not asynchronous communication, but synchronous communication that requests pages, so let's move on.
To prevent form submission, see below:
<button type="button" id="btn_search"><b>search</b>
Change the type of button tag to button to prevent a submit event from occurring, or
<form onsubmit="return false;">
<Button type="submit" id="btn_search"><b>search</b></button>
</form>
There is a way to have the suibmit event handler return false.
© 2024 OneMinuteCode. All rights reserved.