Heim > Artikel > Web-Frontend > Beispiel für das Parsen von JSON-Daten durch jQuery: Analysis_jquery

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

WBOYOriginal: 2016-05-16 15:30:171193Durchsuche

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:"男"}
]

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

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

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>

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

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS-Methode zum Ermitteln des Maximalwerts, Minimalwerts und der Länge eines Array_Javascript-FähigkeitenNächster Artikel：JS-Methode zum Ermitteln des Maximalwerts, Minimalwerts und der Länge eines Array_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen