Maison >interface Web >js tutoriel >jQuery analyse un exemple de données JSON Analysis_jquery

jQuery analyse un exemple de données JSON Analysis_jquery

WBOYoriginal: 2016-05-16 15:30:171272parcourir

Cet article analyse la méthode d'analyse jQuery des données json à travers des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Jetons d'abord un coup d'œil à notre format de données Json :

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

Afin d'éliminer le problème des caractères tronqués, nous avons mis en place un filtre (extrait de code)

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

Côté serveur, j'utilise Servlet pour générer des données json (extrait de code).

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

Code JQuery sur la page :

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

Afin d'éviter les problèmes auparavant, j'ai écrit les données json dans json.txt et json.jsp sans utiliser l'encapsulation servlet, mais j'ai ensuite utilisé Firebug pour les déboguer

Les données json écrites dans les fichiers .jsp et .txt n'ont pas été analysées. Je les ai déboguées dans Firebug et j'ai constaté que le point d'arrêt à la ligne 10 se terminait directement à l'étape suivante

Il n'est pas possible de parcourir le tableau d'objets. Je les ai donc testés séparément

Fichier texte json.txt
jsp fichier json.jsp
Servlet json.do

Pour les données renvoyées, le navigateur ne peut analyser que les données renvoyées par le servlet en tant que données json

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode JS pour obtenir la valeur maximale, la valeur minimale et la longueur d'une compétence array_javascriptArticle suivant：Méthode JS pour obtenir la valeur maximale, la valeur minimale et la longueur d'une compétence array_javascript

Articles Liés

Voir plus