Ajax는 JSON 데이터를 수신합니다.

1. Ajax는 JSON 데이터를 받습니다

JSON: JavaScript Object Notation. JSON은 텍스트 정보를 저장하고 교환하기 위한 구문입니다. JSON은 XML보다 가볍고 효율적이며 구문 분석하기 쉽기 때문에 일반적으로 JSON 형식은 Ajax의 프런트엔드와 백엔드에서 데이터를 전송하는 데 사용됩니다.

1.1 JSON과 XML의 비교

JSON

JSON은 일반 텍스트입니다.

JSON은 "자기 설명적"(사람이 읽을 수 있음)

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의 가장 일반적인 용도 중 하나는 웹 서버에서 JSON 형식의 문자열 데이터를 읽고 JSON 데이터를 JavaScript 개체로 변환한 다음 해당 데이터를 JavaScript 개체에서 사용하는 것입니다. 웹 페이지.

JSON 형식 문자열을 JSON 개체로 변환하는 방법에는 두 가지가 있습니다.

①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 문자열을 JavaScript 개체로 변환하려면 JSON 파서를 사용하는 것이 더 안전합니다.

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 간의 연산 구현을 보여줍니다.

백엔드:

두 개의 지방 및 도시 도메인을 가상화하고 서블릿이 프런트엔드에 데이터를 전송할 수 있도록 지방 및 도시를 로드 및 획득하는 방법 제공:

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;
    }
}

제공 Ajax에 대한 CityProvinceServlet은 요청 주소를 제공합니다:

@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 Tutorial"

위 내용은 Ajax는 JSON 데이터를 수신합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!