Ajax は JSON データを受信します
1. Ajax は JSON データを受け取ります
JSON: JavaScript Object Notation。 JSON は、テキスト情報を保存および交換するための構文です。 JSON は XML よりも軽く、効率的で、解析が簡単なため、Ajax のフロントエンドとバックエンドでデータを送信するために一般に JSON 形式が使用されます。
1.1. JSON と XML の比較
JSON
JSON はプレーン テキストです
JSON には「self-説明 (人間が読める形式)
#JSON は階層構造になっています (値の中に値が存在します) #JSON は JavaScript eval() を通じて解析できます#JSON データを処理できますAJAX 送信を使用します。
XML
XML は複雑なノードを含むドキュメント構造です。
XML は JavaScript を通じて解析でき、ノード情報を読み取るには DOM をループする必要があります。
XML は分厚く、読み取り効率が低い
1.2.JSON 構文
JSON 構文は JavaScript 構文のサブセットです。
# JSON 構文のルール:
#名前と値のペアのデータ
- カンマで区切られたデータ
- 中括弧はオブジェクトを保存します
- 角括弧は配列を保存します
- JSON データの書き込み形式: 名前と値のペア、つまりフィールド名 (二重引用符で囲まれた) と、その後に値に対応するコロンが続きます。JSON の値は次のとおりです: 数値 (整数または浮動小数点)数値)、文字列 (二重引用符内)、論理値 (true または false)、配列 (角括弧内)、オブジェクト (中括弧内)、null。
一般的な JSON 構文の記述:
<script type="text/javascript"> var json01 = {}; //json的第一种写法:json对象 var json02 = []; //json的第二种写法:json数组 // json对象一般写法 var json03 = { name:"张小三", age:45, sex:true }; // json对象标准格式 var json03_1 = { "name":"张小三", "age":45, "sex":true }; //json数组 var json04 = [{ name:"张小三", age:45, sex:true },{ name:"李华", age:20, sex:false } ]; var json05 = [{ name:"张小三", age:45, sex:true, department:{ id:1, name:"IT部", employees:[ {name:"xxx", age:23}, {name:"yyy", age:24} ] } },{ name:"李华", age:20, sex:false } ]; </script>
1.3.JSON ファイル
JSON ファイルのファイル タイプは「.json」
- JSON テキストの MIME タイプは「application/json」
- 1.4 .JSON の使用法
JSON の最も一般的な使用法の 1 つは、Web サーバーから JSON 形式の文字列データを読み取り、JSON データを JavaScript オブジェクトに変換し、そのデータを Web 上で使用することです。ページ。 JSON 形式の文字列を JSON オブジェクトに変換するには 2 つの方法があります:
①JavaScript 関数 eval()を使用する
<script type="text/javascript"> //最标准的json格式:key必须要加双引号 var formatJson = { "name" : "黄小邪", "age" : 23, "sex" : true }; //①jsonStr转json对象方式一: //eval:计算javascript字符串,并把它作为脚本代码来执行 //前台接收到的是json字符串格式,拿数据需要把字符串转化成json对象 var jsonStr = '{name : "黄小邪", age : 23, "sex" : true}'; //注意:使用eval转换jsonStr,必须前后加括号,这里不区分是否标准格式 var jsonObj = eval("("+ jsonStr +")"); console.debug(jsonObj); </script>
②JSON パーサーを使用する
## eval() 関数は、任意の JavaScript コードをコンパイルして実行できますが、eval() を使用すると、潜在的なセキュリティ問題が隠蔽されます。 JSON パーサーを使用して JSON 文字列を JavaScript オブジェクトに変換する方が安全です。 JSON パーサーは、JSON 文字列テキストのみを認識し、スクリプトをコンパイルしませんが、解析が比較的速く、すぐに使用できるという利便性を備えています。 JSON パーサーを使用する: ①JSON 変換 JSONObj 関連の jar パッケージをインポートする必要があります;#②変換オブジェクトには任意の JSON 文字を使用できます文字列形式のテキストですが、標準の JSON 形式である必要があります:
//②jsonStr转json对象方式二: var jsonStr2 = '{"name" : "黄小邪", "age" : 23, "sex" : true}'; //注意:使用JSON.parse转换jsonStr必须保证jsonStr是标准格式的字符串 var jsonObj2 = JSON.parse(jsonStr2); console.debug(jsonObj2);
1.5. JSON と Ajax の間の二次リンケージの例
バックステージ:
2 つの州と市のドメインを仮想化し、サーブレットがフロントエンドにデータを送信するために州と市をロードおよび取得するメソッドを提供します: City.java:/** * 城市对象 * */ public class City { private Long id; private String name; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public City() { } public City(Long id, String name) { super(); this.id = id; this.name = name; } /** * 根据省份id查询省份中的城市! * * @return */ public static List<City> getCityByProvinceId(Long id) { List<City> citys = new ArrayList<City>(); if (id == 1) { citys = Arrays.asList( new City(1L,"成都"), new City(2L,"南充"), new City(3L,"绵阳"), new City(4L,"遂林"), new City(5L,"达州"), new City(6L,"德阳"), new City(7L,"乐山") ); } else if (id == 2) { citys = Arrays.asList( new City(11L,"广州"), new City(12L,"佛山"), new City(13L,"东莞") ); } else if (id == 3) { citys = Arrays.asList( new City(21L,"昆明"), new City(22L,"玉溪"), new City(23L,"丽江") ); } return citys; } }
public class Province { private Long id; private String name; public Province(Long id, String name) { super(); this.id = id; this.name = name; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Province() { super(); } public static List<Province> getAllProvince() { List<Province> provinces = new ArrayList<Province>(); provinces.add(new Province(1L, "四川")); provinces.add(new Province(2L, "广东")); provinces.add(new Province(3L, "云南")); return provinces; } }
@WebServlet("/loadData") public class CityProvinceServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String cmd = req.getParameter("cmd"); String id = req.getParameter("id"); req.setCharacterEncoding("UTF-8"); resp.setContentType("text/json;charset=UTF-8"); //加载省 if(cmd.equals("province")){ List<Province> provinceList = Province.getAllProvince(); resp.getWriter().print(JSONSerializer.toJSON(provinceList)); System.out.println("加载省!"); } //加载市 else { if(id != null && id != ""){ List<City> cityList = City.getCityByProvinceId(Long.parseLong(id)); resp.getWriter().print(JSONSerializer.toJSON(cityList)); System.out.println("加载市!"); } } } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title> <script type="text/javascript"> function getAjax(){ var ajax = null; if(XMLHttpRequest){ ajax = new XMLHttpRequest(); }else if(ActiveXObject){ ajax = new ActiveXObject("Microsoft XMLHTTP"); } return ajax; } function loadProvince() { var xhr = getAjax(); xhr.open("GET", "/loadData?cmd=province"); xhr.onreadystatechange = function () { if(xhr.readyState == 4 && xhr.status == 200){ //provinces:[{"id":1,"name":"四川"},{"id":2,"name":"广东"},{"id":3,"name":"云南"}] var provinces = xhr.responseText; var jsonObjArr = JSON.parse(provinces); //操作DOM往省级option进行填充数据 //首先先创建每个option元素 //将jsonObj数据填充进option中 jsonObjArr.forEach( function (obj) { var option = document.createElement("option"); option.setAttribute("value", obj.id); option.innerHTML = obj.name; document.getElementById("province").appendChild(option); } ); } }; xhr.send(); } loadProvince(); function loadCity() { //得到id var id = document.getElementById("province").value; //如果是请选择,对应就不加载 if(id == -1){ document.getElementById("city").innerHTML = "<option>----请选择----</option>"; return; } //每次加载都初始化一次 document.getElementById("city").innerHTML = ""; var xhr = getAjax(); xhr.open("GET", "/loadData?cmd=city&id=" + id); xhr.onreadystatechange = function () { if(xhr.readyState == 4 && xhr.status == 200){ //[{"id":1,"name":"成都"},{"id":2,"name":"南充"},{"id":3,"name":"绵阳"},{"id":4,"name":"遂林"},{"id":5,"name":"达州"}, // {"id":6,"name":"德阳"},{"id":7,"name":"乐山"}] var cityes = xhr.responseText; var jsonObjArr = JSON.parse(cityes); jsonObjArr.forEach( function (obj) { var option = document.createElement("option"); option.setAttribute("value", obj.id); option.innerHTML = obj.name; document.getElementById("city").appendChild(option); } ); //去除掉----请选择------ document.getElementById("city").options.remove(0); } }; xhr.send(); } </script> </head> <body> 省级:<select id="province" onchange="loadCity()"> <option value="-1">----请选择----</option> </select> 市级:<select id="city"> <option>----请选择----</option> </select> </body> </html>
推奨チュートリアル: "
JS チュートリアル"
以上がAjax は JSON データを受信しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









タイトル: jQuery AJAX リクエストの 403 エラーを解決する方法とコード例。403 エラーは、サーバーがリソースへのアクセスを禁止するリクエストを指します。このエラーは通常、リクエストにアクセス許可がないか、サーバーによって拒否されたために発生します。 jQueryAJAX リクエストを行うときにこのような状況に遭遇することがありますが、この記事ではこの問題の解決方法とコード例を紹介します。解決策: 権限を確認します。まず、要求された URL アドレスが正しいことを確認し、リソースにアクセスするための十分な権限があることを確認します。

MySQL5.7 と MySQL8.0 は 2 つの異なる MySQL データベース バージョンであり、それらの間には主な違いがいくつかあります: パフォーマンスの向上: MySQL8.0 では、MySQL5.7 と比較してパフォーマンスがいくつか向上しています。これには、より優れたクエリ オプティマイザー、より効率的なクエリ実行プランの生成、より優れたインデックス作成アルゴリズムと並列クエリなどが含まれます。これらの改善により、クエリのパフォーマンスとシステム全体のパフォーマンスが向上します。 JSON サポート: MySQL 8.0 では、JSON データのストレージ、クエリ、インデックス作成など、JSON データ型のネイティブ サポートが導入されています。これにより、MySQL での JSON データの処理と操作がより便利かつ効率的になります。トランザクション機能: MySQL8.0 では、アトミックなどのいくつかの新しいトランザクション機能が導入されています。

jQuery は、クライアント側の開発を簡素化するために使用される人気のある JavaScript ライブラリです。 AJAX は、Web ページ全体をリロードせずに、非同期リクエストを送信し、サーバーと対話するテクノロジーです。ただし、jQuery を使用して AJAX リクエストを行うと、403 エラーが発生することがあります。 403 エラーは通常、セキュリティ ポリシーまたは権限の問題が原因で、サーバーによってアクセスが拒否されたエラーです。この記事では、jQueryAJAX リクエストで 403 エラーが発生した場合の解決方法について説明します。

PHP 配列を JSON に変換するためのパフォーマンスの最適化方法には、JSON 拡張機能と json_encode() 関数の使用、文字エスケープを回避するためのバッファーの使用、およびサードパーティのエンコード結果の使用の検討が含まれます。 JSONエンコーディングライブラリ。

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化を制御します。 シリアル化: @JsonIgnore: プロパティを無視します @JsonProperty: 名前を指定します @JsonGetter: get メソッドを使用します @JsonSetter: set メソッドを使用します Deserialization: @JsonIgnoreProperties: プロパティ @ JsonProperty を無視します:名前を指定 @JsonCreator: コンストラクターを使用 @JsonDeserialize: カスタム ロジック

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。

jQueryAJAX エラー 403 の問題を解決するにはどうすればよいですか? Web アプリケーションを開発する場合、非同期リクエストを送信するために jQuery がよく使用されます。ただし、jQueryAJAX の使用時に、サーバーによってアクセスが禁止されていることを示すエラー コード 403 が発生する場合があります。これは通常、サーバー側のセキュリティ設定が原因ですが、回避する方法があります。この記事では、jQueryAJAX エラー 403 の問題を解決する方法と具体的なコード例を紹介します。 1.作る

PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。 サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアント スクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。
