Method of load using jQuery

1.load Brief Introduction

Effect: loading data from the server, and return the data to the designated place in the element.

语法：$(selector).load(url,data,function(response,status,xhr))

参数	描述
url	必需。规定您需要加载的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)	可选。规定 load() 方法完成时运行的回调函数。额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr - 包含 XMLHttpRequest 对象

Reprinted from the table ( https://www.runoob.com/jquery/ajax-load.html )

2. Create a test page

2.1 Create a test template html main page

https://www.cnblogs.com/YorkZhangYang/p/12595862.html

2.2 Creating two test page, which are right1.html and right2.html.

right1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接1内容</title>
</head>
<body>
    <div>
        <a href="javascript:test();"> <span style="font-size: 52px;color:green;">java se</span></a>
    </div>
    <script>
        function test(){
            alert("java se");
        }
    </script>
</body>
</html>

right2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接2内容</title>
</head>
<body>
    <div>
         <span style="font-size: 22px;color: red;">java ee</span>
    </div>
   
</body>
</html>

Methods of application 3.load

3.1 Loading of the page has loaded

// dynamically load content right - Method a 
        (. "Child_ul> Li") $ ON ( "the Click",. Function () {
             var the href = $ ( the this ) .find ( "A") attr ( "the href. " );
             // clear the right side of the content 
            $ ( 'right #' ) .empty ();
             // load the right side of the content 
             $ ( 'right #' ) .load (href);
             // stop jumping          
             return  false ;
        })

3.2 ajax method using dynamic loading

 // dynamically load content right - Method Two 
        var MENU = $ ( "child_ul." );
        srcLi = menu.find('li');
        console.log(srcLi.html());

        srcLi.on('click', function(e) {
        var href = $(this).find("a").attr('href');
        $('#right').empty();
        $.ajax({
            type: "GET",
            url: href,
            // beforeSend: function () { 
            //      $ ( 'right #') HTML ( 'being requested');. 
            // }, 
            Success: function (Data) {
                $('#right').append(data);
            },
            @ Complete: function () {    
            //   }, 
            //   error: function () { 
            //      . $ ( '# Right ") HTML (' load error '); 
            //   } 
        });
         // stop jump 
        return  false ;

4. Run effect

Reference article:

https://www.runoob.com/jquery/ajax-load.html

https://www.cnblogs.com/haiying520/p/5401727.html

Method of load using jQuery

Guess you like