目次
1. Ajax は JSON データを受け取ります" >1. Ajax は JSON データを受け取ります
JSON 形式の文字列を JSON オブジェクトに変換するには 2 つの方法があります: " >JSON の最も一般的な使用法の 1 つは、Web サーバーから JSON 形式の文字列データを読み取り、JSON データを JavaScript オブジェクトに変換し、そのデータを Web 上で使用することです。ページ。 JSON 形式の文字列を JSON オブジェクトに変換するには 2 つの方法があります:
バックステージ: " >バックステージ:

Ajax は JSON データを受信します

Jun 24, 2020 am 09:39 AM
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 の間の二次リンケージの例

ここでは、JSON 文字列操作とフロントエンドは JSON 形式でデータを送信し、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;
    }
}
ログイン後にコピー
Province.java:

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;
    }
}
ログイン後にコピー
CityProvinceServlet を指定して Ajax にリクエスト アドレスを提供します:

@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("加载市!");
            }

        }
    }
}
ログイン後にコピー
フロント デスクは Ajax と JSON を使用して、渡された JSON 形式のデータを解析します。

<!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 サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

jQuery AJAX リクエストで発生した 403 エラーを解決する方法 jQuery AJAX リクエストで発生した 403 エラーを解決する方法 Feb 20, 2024 am 10:07 AM

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

MySQL5.7とMySQL8.0の違いは何ですか? MySQL5.7とMySQL8.0の違いは何ですか? Feb 19, 2024 am 11:21 AM

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

jQuery AJAXリクエスト403エラーを解決する方法 jQuery AJAXリクエスト403エラーを解決する方法 Feb 19, 2024 pm 05:55 PM

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

PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント May 04, 2024 pm 06:15 PM

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

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? May 06, 2024 pm 10:09 PM

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

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

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

PHPを深く理解する:JSON Unicodeを中国語に変換する実装方法 PHPを深く理解する:JSON Unicodeを中国語に変換する実装方法 Mar 05, 2024 pm 02:48 PM

PHP の深い理解: JSONUnicode を中国語に変換する実装方法 開発中、JSON データを処理する必要がある状況によく遭遇しますが、特に変換する必要がある場合、JSON 内の Unicode エンコードによっていくつかのシナリオで問題が発生します。 Unicode エンコードを漢字に変換する場合。 PHP では、この変換処理を実現するためのメソッドがいくつかありますが、以下では一般的なメソッドを紹介し、具体的なコード例を示します。まず、JSON の Un について理解しましょう

jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? Feb 23, 2024 pm 04:27 PM

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

See all articles