Beispiel für das Parsen von JSON-Daten durch jQuery: Analysis

Beispiel für das Parsen von JSON-Daten durch jQuery: Analysis_jquery

WBOY

Freigeben： 2016-05-16 15:30:17

Original

1270 Leute haben es durchsucht

In diesem Artikel wird die Methode zum Parsen von JSON-Daten durch jQuery anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Werfen wir zunächst einen Blick auf unser Json-Datenformat:

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

Nach dem Login kopieren

Um das Problem verstümmelter Zeichen zu beseitigen, haben wir einen Filter (Code-Snippet) eingerichtet

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);
}

Nach dem Login kopieren

Auf der Serverseite verwende ich Servlet, um JSON-Daten (Code-Snippet) zu generieren.

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);
}

Nach dem Login kopieren

JQuery-Code auf der Seite:

<%@ 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>

Nach dem Login kopieren

Um Ärger zu vermeiden, habe ich die JSON-Daten ohne Verwendung der Servlet-Kapselung in json.txt und json.jsp geschrieben, aber dann habe ich Firebug zum Debuggen verwendet

Die in .jsp- und .txt-Dateien geschriebenen JSON-Daten wurden nicht in Firebug analysiert und festgestellt, dass der Haltepunkt in Zeile 10 direkt im nächsten Schritt endete

Das Objektarray wird nicht durchlaufen. Also habe ich sie separat getestet

Textdatei json.txt

JSP-Datei json.jsp
Servlet json.do

Für die zurückgegebenen Daten kann der Browser nur die vom Servlet zurückgegebenen Daten als JSON-Daten analysieren