ajax통신으로 list를 json형태로 변환해서 view페이지로 쏴주는데 정말 json만나와요...(캡처 유 )
조회수 19396회
이런식으로요 원래는 검색 버튼을 웹페이지에서 누르면 ajax 통신을 통해 데이터를 보냈다가 json으로 변환해서 가져오는 형식이거든요? 근데 printWrite를 쓴것도 아닌데 자꾸 결과가 이렇게 호출돼서 뷰페이지를 볼수가없어요....
아래와같이 ajax를 저렇게 보내면
<%@ page language="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("검색 버튼 클릭!");
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통신 실패!!!");
}
});
});
});
</script>
이부분이 ajax통신으로 controller에서 받는부분인데 데이터를 받아서 다시 json형태로 str을 return 해 주는데 어떤부분이 잘못돼서 자꾸 위 캡처처럼 저렇게뜨는걸까요 ㅠㅠㅠㅠㅠㅠㅠㅠ
@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("컨트롤러에서 넘기는 값 : "+keyword);
//System.out.println("컨트롤러에서 넘기는 startyear : "+startyear);
//System.out.println("컨트롤러에서 넘기는 endyear : "+endyear);
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;
}
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
보니까 소스를 핵심만 줄이면 아래처럼 되는데요:
<script type="text/javascript"> $(function(){ $("#btn_search").click(function(){ //alert("검색 버튼 클릭!"); var params = $("#formId").serialize(); $.ajax({ url:'movieFinder.com', type:'POST', dataType: "json", data:params, success:function(data){ // success }, error:function(){ alert("ajax통신 실패!!!"); } }); }); }); </script> <body> <form id="formId" action="movieFinder.com" method="post"> <button type="submit" class="btn btn-danger" id="btn_search"><b>검색</b></button> </form> </body>버튼 태그의 타입을 보시면
submit으로 되어 있습니다. 이럴 때 버튼 태그를 클릭하면 click 이벤트 외에 submit 이벤트도 동시에 발생하면서 HTML 기본 기능인 form submit이 작동하게 됩니다.form submit이란 쉽게 말해서:
<script> document.myForm.submit(); </script>이거라고 보시면 됩니다. html의 submit과 javascript의 submit은 엄밀히 따지면 좀 다릅니다만... 하여간 이게 비동기 통신이 아니라 페이지를 요청하는 동기 통신인건 아실것 같으니 넘어가구요.
form submit을 방지하려면 아래처럼:
<button type="button" id="btn_search"><b>검색</b></button>버튼 태그의 타입을
button으로 바꿔서 submit 이벤트가 발생하지 않도록 하거나,<form onsubmit="return false;"> <button type="submit" id="btn_search"><b>검색</b></button> </form>suibmit 이벤트 핸들러에서 false를 반환하게 하는 방법이 있습니다.
- 와!!!!!진심 자세한 설명 감사합니다 :) 알려주신 방법대로 하니까 해결됐어요!!! from submission일거라는 생각 자체를 안했었는데 !! 정말정말 감사합니다 ㅠㅠㅠㅠㅠㅠㅠㅠ!!! 알 수 없는 사용자 2017.7.29 00:51
댓글 입력