DEBUG: jQuery.ajax() 사용 시 요청처리가 완료되었는데도 404에러가 발생할 때

?

1 2 3 4 5 6 7 8 9 10 11 12 13

$.ajax({     type: "POST",     url: submitUrl,     data: $(form).serialize(),     contentType: 'application/x-www-form-urlencoded; charset=utf-8',     success: function(data) {         if(data.code == '0') {             alert("code:"+ data.code + "\n" + "msg:" + data.msg);         } else {             alert("code:" + data.code + "\n" + "msg:" + data.msg);         }       } });

 

위처럼 jQuery의 ajax 메서드를 사용한다고 할 때 요청이 정상적으로 처리되었음에도 404 에러가 발생하는 경우가 있다.

(보통 이 에러는 브라우저의 개발자 도구 활성화 시에만 나타난다)

?

1 2 3 4 5 6 7 8

@RequestMapping("/faqDetailAjax") public void faqDetailAjax(@RequestParam HashMap<String, String> params) {     //로그인     params.put("regstaff_id", "admin_test");           params.put("view_cnt", "0");     faqDao.insertFaq(params);           }

 

컨트롤러가 AJAX요청을 받아서 처리만 하고 다시 돌려주는 값이 없어서 발생하는 에러다.

요청을 했는데 응답이 없으니 응답이 없다는 메세지가 나올 수 밖에. page(response) not found 서버놈이불러도대답이없어

Response 객체에 응답값을 설정해주면 404 에러는 발생하지 않는다. 이 때 데이터의 타입은 $.ajax() 옵션 중 dataType과 일치해야 한다.

1. 순수 서블릿

● JSONObject  - 관련라이브러리

?

1 2 3 4 5

$.ajax({   ...   dataType: "json",   ... });

 

응답값을 JSON 타입으로 처리하도록 설정하고 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import net.sf.json.JSONObject;   public class Dispatcher extends HttpServlet {     doGet() { ..생략.. }     doPost() { ..생략.. }       protected void process(HttpServletRequest req, HttpServletResponse resp)         throws ServletException, IOException {               JSONObject json = new JSONObject();                   json.put("code", "200");         json.put("msg", "success");                   PrintWriter out = resp.getWriter();         out.print(json);     }       }

 

● String

?

1 2 3 4 5

$.ajax({   ...   dataType: "text",   ... });

 

여기서는 dataType옵션을 json이 아닌 text로 설정한다.

?

1 2 3 4 5 6

protected void process(HttpServletRequest req, HttpServletResponse resp)         throws ServletException, IOException {       PrintWriter out = resp.getWriter();     out.print("'{code:\"200\", msg:\"success\"}'"); }

 

위 예제에서 응답 문자열이 JSON형식이라는 점을 이용, JSON객체로 변환하여 접근할 수도 있다.

?

1 2 3 4 5 6 7

$.ajax({     ...     success: function(data) {     var jsonData = $.parseJSON(data);         alert(jsonData.msg);     } });

 

2. 스프링

 @ResponseBody 어노테이션을 추가하고 맵형태로 아무값이나 던져준다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@RequestMapping("/faqDetailAjax") @ResponseBody public HashMap<String, String> faqDetailAjax(@RequestParam HashMap<String, String> params) {     //로그인     params.put("regstaff_id", "admin_test");           params.put("view_cnt", "0");     faqDao.insertFaq(params);                     HashMap<String, String> map = new HashMap<String, String>();     map.put("code","1");     map.put("msg", "등록하였습니다.");     return map; }

 

스프링에서도 서블릿 예제와 마찬가지로 String, XML 등으로 응답할 수 있다.