jQuery menghuraikan contoh data json analysis

jQuery menghuraikan contoh data json analysis_jquery

WBOY

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

asal

1254 orang telah melayarinya

Artikel ini menganalisis kaedah jQuery menghuraikan data json melalui contoh. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Mari kita lihat format data Json kami dahulu:

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

Salin selepas log masuk

Untuk menghapuskan masalah aksara bercelaru, kami menyediakan penapis (coretan kod)

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

Salin selepas log masuk

Di bahagian pelayan, saya menggunakan Servlet untuk menjana data json (coretan kod).

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

Salin selepas log masuk

Kod JQuery pada halaman:

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

Salin selepas log masuk

Untuk menyelamatkan masalah sebelum ini, saya menulis data json ke dalam json.txt dan json.jsp tanpa menggunakan pengkapsulan Servlet, tetapi kemudian saya menggunakan Firebug untuk nyahpepijat

Data json yang ditulis ke fail .jsp dan .txt tidak dihuraikan dalam Firebug dan mendapati titik putus pada baris 10 berakhir terus dalam langkah seterusnya

Tidak ada yang melintasi tatasusunan objek. Jadi saya mengujinya secara berasingan

Fail teks json.txt

fail jsp json.jsp
Servlet json.do

Untuk data yang dikembalikan, penyemak imbas hanya boleh menghuraikan data yang dikembalikan oleh Servlet sebagai data json