jq's AJAX not only requests network data, but also accesses html and js files across domains. For example, when it accesses js files across domains, it actually does two things: 1. Create < script > tag, src points to the url to be accessed, appendChild() goes to the head tag; 2. Declare function fn, FN must have the same name as the method invoked in the request target js file.

Attention should be paid to the following points: 1. Create both html and js files

With this foundation, we can use ajax to build pages modularily, similar to the ideas of various mvc frameworks.

1. Define two functions in the global script app.js

Get the path parameter function:

function getUrlParms(){
    
    var params={};
    
    var url=window.location.href;
    
    var arr=url.split("?");

    if(arr.length==2){
        var p=arr[1];     
    }else{
       console.log(params)
       return params;    
    }
    
    // p="a=1&b=2&c=3"
    var parr=p.split("&"); // ["a=1","b=2","c=3"]
    
    for(var i=0;i<parr.length;i++){

        var kv=parr[i].split("=");
              
        params[kv[0]]=kv[1];

    }   
    console.log(params)

    // {a:1,b:2,c:3}    
}

Load module function:

function router(m,container){

    container=container||$("#share");

    // Request module structure
    $.ajax({
        url:"views/"+m+".html",
        success: function(data){
            container.html(data);
        }
    })

    // Request js file
    loadJs(m);

}
function loadJs(m){
   $.ajax({
       url:"js/"+m+".js",
   })   
}

2. Set the page presented by the first open file. If there is a welcome page, use the knowledge of local Storage:

$(function(){

  // First Load - Open the Welcome Page, more than two times open the tab module

    if(!localStorage.count){
        localStorage.count=0;
    }

    localStorage.count++;

    console.log(localStorage.count);

    if(localStorage.count==1){
        router("hello")
    }else{
        router("tab")   //Tab is the first page presented by this project after the welcome page disappears.
    }   
})

3. tab module, the invariant part, such as header, written in tab.html, which needs dynamic change, calls router() method in tab.js. Of course, make space in tab.html beforehand, after insertion, use ajax to request content:

router("home",$("#Tabcontainer")//home is a home.html file

That's the way it works, is it very similar to vue components?

4. If home.html needs to write a list of requests for network data, how does it work? The following are examples:

<img src="image/banner1.jpg" class="auto">
<p class="tj">Recommended song list 3</p>

<div class="songlist">

</div>

<div id="templateItem" style="display: none;">        //This is the template prototype for dynamic insertion, with display set to none
//The goal is to make it not visible in the view.

    <div class="item">
       <div>200</div>
       <img src="image/18581746511268315.jpg" class="auto">
       <p>Boss,Give me a dozen of such boyfriends</p>
    </div>

</div>

Then in home.js, the point is to use the callback function to process the data returned from the ajax request.

var server = "http://musicapi.duapp.com/api.php";//server

//Url: server +"? Type = topPlayList&cat=% E5%85%A8%E9%83%A8&offset=0&limit="+9,//URL address

function getPlayList(limit,callback){

    $.ajax({
        type:"get",
        url: server+"?type=topPlayList&cat=%E5%85%A8%E9%83%A8&offset=0&limit="+limit,
        async:true,
        success:function(data){
            //console.log(data);
            callback(data.playlists)
        }
   });

}

getPlayList(9,function(data){

      console.log(data)

      var $songlist=$(".songlist");

      var template=$("#Template Item "). HTML (); // / cannot create a template in a function, otherwise only one template can be inserted.

      for(var i=0;i<data.length;i++){

         var $template=$(template);
         $template.find("div").html(data[i].playCount);
         $template.find("img").attr("src",data[i].coverImgUrl);
         $template.find("p").html(data[i].name);
         $template.appendTo($songlist);

      }

});

Obtain the template's html with jq. Note that the object obtained with html() is a js object. If you want to use the next find() method, wrap it with $() and convert it into a JQ object.

String splicing can also be used here.