JQueryで解析するJson形式のデータ処理 code_jquery-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:33 PM

json形式

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

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

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

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

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

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

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

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

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String BasePath = request.getScheme() " ://" request.getServerName() ":" request.getServerPort() path "/"; %> < html> --> 住所 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); ; });

更なる一运行效果吧！！

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7573

CakePHP チュートリアル

1386

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

110

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？ Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

初心者向けのタイプスクリプト、パート2：基本データ型 Mar 19, 2025 am 09:10 AM

エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル（ES6によって導入）とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。ヌルデータ型 JavaScriptのように、Typescriptのnull

PowerPointはJavaScriptを実行できますか？ Apr 01, 2025 pm 05:17 PM

JavaScriptはPowerPointで実行でき、外部JavaScriptファイルを呼び出したり、VBAを介してHTMLファイルを埋め込んだりすることで実装できます。 1. VBAを使用してJavaScriptファイルを呼び出すには、マクロを有効にし、VBAプログラミングの知識を持つ必要があります。 2。JavaScriptを含むHTMLファイルを埋め込みます。これは、シンプルで使いやすいが、セキュリティ制限の対象となります。利点には、拡張機能と柔軟性が含まれますが、欠点にはセキュリティ、互換性、複雑さが含まれます。実際には、セキュリティ、互換性、パフォーマンス、ユーザーエクスペリエンスに注意を払う必要があります。

See all articles

姓	名
	gt;