집 >웹 프론트엔드 >JS 튜토리얼 >jQuery 파싱 json 데이터 예제 analyze_jquery

jQuery 파싱 json 데이터 예제 analyze_jquery

WBOY원래의: 2016-05-16 15:30:171279검색

본 글은 jQuery가 json 데이터를 파싱하는 방법을 예시를 통해 분석한 글입니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

먼저 Json 데이터 형식을 살펴보겠습니다.

[
{id:01,name:"小白",old:29,sex:"男"},
{id:02,name:"小蓝",old:29,sex:"男"},
{id:03,name:"小雅",old:29,sex:"男"}
]

문자 깨짐 문제를 해결하기 위해 필터(코드 스니펫)를 설정했습니다.

public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
    req.setCharacterEncoding("UTF-8");
    resp.setCharacterEncoding("UTF-8");
    resp.setContentType("text/html;charset=UTF-8");
    chain.doFilter(req, resp);
}

서버 측에서는 Servlet을 사용하여 json 데이터(코드 조각)를 생성합니다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    PrintWriter out = response.getWriter(); //过滤器已经做过编码转化了。 resp.setContentType("text/html;charset=UTF-8");
    StringBuffer sb = new StringBuffer();
    sb.append("[{id:01,name:\"小白\",old:29,sex:\"男\"},");
    sb.append("{id:02,name:\"小蓝\",old:29,sex:\"男\"},");
    sb.append("{id:03,name:\"小雅\",old:29,sex:\"男\"}]");
    out.print(sb);
}

페이지의 JQuery 코드:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>json学习</title>
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  <script type="text/javascript" src="jslib/jquery.js" charset="UTF-8"></script>
  <script type="text/javascript" charset="UTF-8">
    $(document).ready(function() {
      var select = $("#select");
      $.get("json.do", null, function(data) {
        var jsonData = eval(data);//接收到的数据转化为JQuery对象，由JQuery为我们处理
        $.each(jsonData, function(index, objVal) { //遍历对象数组，index是数组的索引号，objVal是遍历的一个对象。
          //val["属性"]可取到对应的属性值。
          $("<option>").attr("value", objVal["id"]).html(objVal["name"]).appendTo(select);
        });
      });
    });
  </script>
</head>
<body>
<select id="select"></select>
</body>
</html>

이전에는 문제를 해결하기 위해 서블릿 캡슐화를 사용하지 않고 json.txt와 json.jsp에 json 데이터를 썼는데, 그 후 Firebug를 사용하여 디버깅했습니다

.jsp 및 .txt 파일에 작성된 json 데이터가 구문 분석되지 않았습니다. Firebug에서 디버깅한 결과 10번째 줄의 중단점이 다음 단계에서 바로 끝나는 것을 발견했습니다.

객체 배열 순회가 없습니다. 그래서 따로 테스트해봤습니다

텍스트 파일 json.txt
jsp 파일 json.jsp
서블릿 json.do

반환된 데이터의 경우 브라우저는 서블릿이 반환한 데이터를 json 데이터로만 구문 분석할 수 있습니다

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：array_javascript 스킬의 최대값, 최소값, 길이를 구하는 JS 메소드다음 기사：array_javascript 스킬의 최대값, 최소값, 길이를 구하는 JS 메소드

jQuery 파싱 json 데이터 예제 analyze_jquery

관련 기사