Ajax は JSON データを受信します-jsチュートリアル-php.cn

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 チュートリアル