jQuery analyse un exemple de données JSON Analysis

jQuery analyse un exemple de données JSON Analysis_jquery

WBOY

Libérer： 2016-05-16 15:30:17

original

1258 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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