Rumah > Artikel > hujung hadapan web > jQuery menghuraikan contoh data json analysis_jquery

jQuery menghuraikan contoh data json analysis_jquery

WBOYasal: 2016-05-16 15:30:171193semak imbas

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

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

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

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>

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

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Kaedah JS untuk mendapatkan nilai maksimum, nilai minimum dan panjang kemahiran array_javascriptArtikel seterusnya：Kaedah JS untuk mendapatkan nilai maksimum, nilai minimum dan panjang kemahiran array_javascript

Artikel berkaitan

Lihat lagi