First, create Ajax

let req = new XMLHttpRequest();
Copy the code

Send a request

 req.open('POST'.'asses/test/city.json'.false);// Send the request
 req.send();// Send the request to the server
Copy the code

Open (method, ul, async) takes three arguments; 1. Request types: GET and POST. 2, request file address. 3. True (asynchronous) or false (synchronous)

Third, the request gets the response return data

if (req.readyState === 4 && req.status === 200) {let tes = JSON.parse(req.responseText);// Process the returned data
        console.log(tes);
    }else {
        document.write('wrong');
    }
Copy the code

ResponseText: get the corresponding data in string form. ResponsXML: obtain the corresponding data in XML form. 3. Status: Returns the HTTP status code in numeric and text form. (1) 200: Success. (2) 404: Page not found. 4. ReadyState property: Get notified when the response returns a success. (1) 0: The request is not initialized and open has not been called. (2) 1: The server connection has been established and open has been called. (3) 2: The request has been received, that is, the end of the message received. (4) 3: The request is being processed, that is, the response body is received. (5) 4: The request is completed and the response is ready, that is, the response is completed.

4. JQuery method

$.ajax({
        type: 'post'.// Request type
        url: 'asses/test/city.json'.// File address
        async: false.// Asynchronous (synchronous)
        dataType: 'json'.// File type (json)
        success:function (value) {// The function was successfully executed
            data = value;
        },
        error:function (e) {// Fail to execute the function
            console.error(e); }});Copy the code

Very convenient, simple code, but still support writing native.

html

<div style="width: 610px; margin: 20px auto;">
    <div style="margin-bottom: 10px;"><h3>Select location</h3></div>
    <select id="capital">
        <option>Please select the provincial capital</option>
    </select>
    <select id="cit">
        <option>Please select the provincial capital first</option>
    </select>
    <select id="county">
        <option>Please select district and county first</option>
    </select>
</div>
Copy the code

js

let capital = $('#capital');
    let cit = $('#cit');
    let county = $('#county');
    let data = [];
    let arr;
    
    // Native JS creates Ajax requests
    /*let req = new XMLHttpRequest(); Open ('POST','asses/test/city.json',false); Req.send (); If (req.readyState === 4 && req.status === 200){let tes = json.parse (req.responseText); // Process returned data console.log(tes); }else {document.write(' error '); } * /

    // jQuery creates an Ajax request
    $.ajax({
        type: 'post'.url: 'asses/test/city.json'.async: false.dataType: 'json'.success:function (value) {
            data = value;
        },
        error:function (e) {
            console.error(e); }});// Generate the option for the first select
    for (let i=0; i<=data.length-1; i++){let op = $('<option value="' + i + '" >' + data[i].name + '</option>');
        capital.append(op);
    }
    // Generate the option for the second select based on the first click
    capital.change(() = >{// Change the provincial capital
        cit.empty();// Clear cit options
        county.empty();// Clear the option for county
        if (capital.val() == 'Please select the provincial capital') {let op = $(' Please select the provincial capital ');
            let op2 = $(' Please select the city first ');
            cit.append(op);
            county.append(op2);
        }else {
            arr = data[capital.val()].city;
            for (let i=0; i<=arr.length-1; i++){let op = $('<option value="' + i + '" >' + arr[i].name + '</option>');
                cit.append(op);
            }
            let b = arr[cit.val()].area;
            for (let i=0; i<=b.length-1; i++){let op = $('<option value="' + i + '" >' + b[i] + '</option>'); county.append(op); }}});// Generate the option for the third select based on the second click
    cit.change(() = >{// The city changes
        county.empty();
        let b = arr[cit.val()].area;
        for (let i=0; i<=b.length-1; i++){let op = $('<option value="' + i + '" >' + b[i] + '</option>'); county.append(op); }})Copy the code

This is some small exercises I do when LEARNING JS, I share it with you, thank you!