Advanced front-end module 1 for beginners

Keywords: Javascript JSON JQuery Attribute

1. Analysis task

Using AJAX to read JSON file data, using loop and conditional statements to store the required data in each array, combining with change event can achieve the required functions

2. Analysis of advantages and disadvantages

Advantage: not only in the implementation of its basic functions, but also in the json file to change the attribute value of index, change the order in the drop-down list.

Disadvantages: the lower the level, the more serious the nesting is, but it can't be avoided (self think)

3. Code display

Link.html file:

 1 <html>
 2 <head>
 3     <meta charset="UTF-8">
 4     <link rel="stylesheet" href="css/linkage.css">
 5     <script src="jquery/jquery-1.7.1.js"></script>
 6     <script src="js/link.js"></script>
 7 </head>
 8 <body>
 9 <div><select class="one"><option id="q1">Please select a country</option></select></div>
10 <div><select class="two"></select></div>
11 <div><select class="three"></select></div>
12 <div><select class="four">></select></div>
13 </body>
14 </html>

link.js file display:

$(document).ready(function () {
$.ajax({
   url:'data/linkage.json',
    type:"post",
    dataType:"json",
    success:function(data){
       /*Country*/
        var arr1 = [];
        $.each(data.nation,function (i,e) {
            arr1[e.index]=e.name;
        });
        $.each(arr1,function () {
            if(this!=null){
                $(".one").append("<option>" + this+ "</option>");
            }
        });
        /*Province*/
        var arr2 = [];
       $(".one").change(function() {
            var one_text=$(".one option:selected").text();
            $(".two").empty();
            $(".three").empty();
            $(".four").empty();
            $(".two").append("<option>" + "Please select a province"+ "</option>");
          $.each(data.nation,function (i,e) {
              if(e.name==one_text){
              $.each(e.province,function (j,h) {
                  console.log(h.name);
                      arr2[h.index]=h.name;
              })
              }
          })
          $.each(arr2,function () {
              if(this!=null){
                  $(".two").append("<option>" + this+ "</option>");
              }
          })
          console.log(arr2);
      });
         /*  city*/
          var  arr3=[];
        $(".two").change(function() {
            var one_text=$(".one option:selected").text();
            var two_text=$(".two option:selected").text();
            $(".three").empty();
            $(".four").empty();
            $(".three").append("<option>" + "Please select the city."+ "</option>");



            $.each(data.nation,function (i,e) {
                if(e.name==one_text){
                    $.each(e.province,function (j,h) {
                        if(h.name==two_text) {
                            $.each(h.city,function (k,r) {
                                console.log(r.name);
                                arr3[r.index]=r.name;
                            })
                        }

                    })
                }
            })
            $.each(arr3,function () {
                if(this!=null){
                    $(".three").append("<option>" + this+ "</option>");
                }
            })





        });
        /*county*/
        var arr4=[];
        $(".three").change(function() {
            var one_text=$(".one option:selected").text();
            var two_text=$(".two option:selected").text();
            var three_text=$(".three option:selected").text();
            $(".four").empty();
           $(".four").append("<option>" + "Please choose County"+ "</option>");
                $.each(data.nation,function (i,e) {
                    if(e.name==one_text){
                        $.each(e.province,function (j,h) {
                            if(h.name==two_text) {
                                $.each(h.city,function (k,r) {
                                    if(r.name==three_text) {
                                        $.each(r.county,function (l,g) {
                                            arr4[g.index]=g.name;
                                        })
                                    }
                                })
                            }
                        })
                    }
                })
                $.each(arr4,function () {
                    if(this!=null){
                        $(".four").append("<option>" + this+ "</option>");
                    }
        });


        // wer();

 /*       function wer() {

            for (var num = 0; num < data.nation.length; num++) {
                $(".one").append("<option>" + data.nation[num].name + "</option>");
            }
        }*/

        // function wer() {
        //     $.each(data，function(i,val){
        //
        //
        //         $(".one").append("<option>" + onelink.nation[index].name + "</option>");
        //     })
        // }

    });


    },
    error:function(){
        alert(0)
    }
})
})

The file link.json shows:

{
  "nation": [
    {
      "name": "China",
      "index":1,
      "province": [
        {
          "name": "Henan Province",
          "index":0,
          "city": [
            {
              "name": "Zhengzhou City",
              "index":0,
              "county": [
                {
                  "name": "Zhengyi County",
                  "index":0
                },
                {
                  "name": "Zheng two County",
                  "index":1
                }
              ]
            },

4. Problems encountered in actual operation:

When taking the value of json, you can't get it. If you think it's not converted to json object, you can't get the value. Then you can get the value of array object in sequence.

5. Knowledge and understanding: conversion of JSON objects and JSON strings

json is passed as a string, while json operates on json objects.

json string: VAR STR = '{"name": "Alica", "age": "12"}';

json object: VAR obj = {"name": "Alica", "age": "12"};

String to json object: var obj=eval('('+str + ')');

The json object is converted to String:var str=obj.toJSONString();

6. Knowledge understanding: jQuery traverses json objects

grep:

each:

1 　　$.each(arr, function(i, item){      
2   
3 　　});

Where arr represents an array object, i represents the array subscript, and item represents the content of the array subscript

inArray:

var anArray = ['one','two','three'];
var index = $.inArray('two',anArray);
alert(index);//Returns the key value of the value in the array, and returns 1
alert(anArray[index]);//Eject two

The key value corresponding to the content can be obtained according to the inArray according to the content

map:

Posted by Millar on Sun, 01 Dec 2019 10:44:09 -0800

Programmer Group

Advanced front-end module 1 for beginners

Hot Keywords