JQueryで解析するJson形式のデータ処理 code_jquery

今日は JSON (JavaScript Object Notation) について少し学びました。軽量のデータ交換形式です。 人間にとって読み書きしやすい。機械による解析と生成も簡単です。 JSON は完全に言語に依存しないテキスト形式を使用しますが、C 言語ファミリー (C、C、C#、Java、JavaScript、Perl、Python などを含む) に似た規則も使用します。 これらの特性により、JSON は理想的なデータ交換言語になります。

JSON は 2 つの構造から構成されます:

名前と値のペアのコレクション。さまざまな言語では、オブジェクト、レコード、構造体、辞書、ハッシュ テーブル、キー付きリスト、または連想配列として理解されます。
順序付けられた値のリスト。ほとんどの言語では、これは配列として理解されます。

これらは一般的なデータ構造です。実際、最新のコンピューター言語のほとんどは、何らかの形でそれらをサポートしています。これにより、同様にこれらの構造に基づくプログラミング言語間でデータ形式を交換できるようになります。

JSON には次の形式があります:

オブジェクトは、名前と値のペアの順序付けされていないコレクションです。オブジェクトは「{」（左括弧）で始まり「}」（右括弧）で終わります。各「名前」の後には「:」 (コロン) が続き、「名前と値」のペアは「,」 (カンマ) で区切られます。

さて、ナンセンスな話はやめて、早速例に行きましょう! ！この小さなデモのデザインは次のとおりです。index.jsp ページはサーバー側のサーブレットにアクセスします。転送されるデータは Json 形式です。 Json 形式でこの記事を書きます。ブログは視聴者を騙しているのと同じです。

index.jsp 側のコード (最初に簡単、次に難しい順序):

コードをコピーします コードは次のとおりです:

--> 住所 td1">gt;gt; gt; gt; gt; ;td id="td0"> ;/テーブル>/本文>

次に、person と address という 2 つの Bean プログラムがあります。これら 2 つのクラスは、主に Json がデータを送信する方法と送信されるデータの形式をより適切に反映するためにここで設計されています

コードをコピー コードは次のとおりです:

パッケージcom.wk;パブリッククラス人{プライベート文字列名;プライベート文字列姓;プライベートアドレスアドレス;パブリック パーソン() { スーパー(); public Person(String firstName, String lastName, Address address) { super(); this.firstName = 名; this.lastName = 姓; this.address = 住所; public String getFirstName() { firstName を返します。 public void setFirstName(String firstName) { this.firstName = firstName; public String getLastName() { 姓を返します。 public void setLastName(String lastName) { this.lastName = lastName; } } public Address getAddress() { 戻りアドレス; public void setAddress(アドレスアドレス) { this.address = アドレス;パッケージ com.wk;パブリック クラス アドレス {プライベート int ID;プライベート文字列の詳細。パブリックアドレス() { スーパー(); } public Address(int id, String 詳細) { super(); this.id = ID; this.detail = 詳細; public int getId() {IDを返します。 public void setId(int id) { this.id = id; } public String getDetail() {詳細を返します。 public void setDetail(String 詳細) { this.detail = 詳細; } }

サーブレット代番号：

复制代 代码如下:

パッケージ com.servlet;インポート java.io.IOException; java.io.PrintWriterをインポートします。 java.util.ArrayListをインポートします。 java.util.Listをインポートします。インポート javax.servlet.ServletException;インポート javax.servlet.http.HttpServlet;インポート javax.servlet.http.HttpServletRequest;インポート javax.servlet.http.HttpServletResponse; com.wk.Address をインポートします。 com.wk.person をインポートします。 public class PersonServlet extends HttpServlet{ private staticfinallongserialVersionUID = 1L;静的 StringBuffer bf; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/html;charset=utf-8");リスト人 = 新しい ArrayList(); PrintWriter out = resp.getWriter();
人 person1 = 新しい人();アドレス a1 = 新しいアドレス(); a1.setId(1); a1.setDetail("河北省"); person1.setFirstName("瓜"); person1.setLastName("傻"); person1.setAddress(a1); people.add(person1);
人 person2 = 新しい人();アドレス a2 = 新しいアドレス(); a2.setId(2); a2.setDetail("江西省"); person2.setFirstName("蛋"); person2.setLastName("笨"); person2.setAddress(a2); people.add(person2);
人 person3 = 新しい人();アドレス a3 = 新しいアドレス(); a3.setId(1); a3.setDetail("湖南省"); person3.setFirstName("痴"); person3.setLastName("白"); person3.setAddress(a3); people.add(person3);
bf = 新しい StringBuffer();
/* 構成成json格式の文字列 * {"person":[ * {"firstname":"", "lastNmae":"", "address": {"id":"", "detail":"" }}, * ]} */ bf.append("{"人":["); for(人 人 : 人) { bf.append("{"名":"").append(person.getFirstName()).append("","").append("姓":""). append(person.getLastName()).append("",")。 append(""address":").append("{"id":"").append(person.getAddress().getId()).append("","").append("detail": "").append(person.getAddress().getDetail()).append(""").append("}},"); } // 最後の一逗号を削除します int length = bf.length();文字列 newStr = bf.substring(0, length-1); bf = 新しい StringBuffer(); bf.append(newStr);
bf.append("]}"); out.println(bf); @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); }

次の代コードは、Jquery が Json データをどのように解析するか、またこのデモの核心代コードです:

复制代 代码如下:

$(document).ready(function() { $("table").css("border-color", "lightblue").css("border-style", "solid"); $("#head" ).css("background-color", "lightblue"); $.ajax({ // 後台处理程序 url : "Json", // データ送信方式 type : "post", // 受信データ格式 dataType : " json", timeout : 20000,// 要求超過時間（秒）を設定します。 // 要求成功後の回帰関数。 success : function(dataObj) { var member = eval(dataObj); //alert(member.person[1] .firstname); $(dataObj.person).each(function(i, per) { $("#tr" i).find("#td0").html(per.lastname); $("#tr" i).find("#td1").html(per.firstname); $("#tr" i).find("#td2") .html(per.address.detail); ; });

更なる一运行效果吧！！

姓	名
	gt;