jQuery初学基础常用内容——AJAX

什么是AJAX，我对于AJAX的理解就是，当你网页中的某个功能，需要请求一条数据，在加载这个数据的时候（比如说显示一个额外的小卡片栏，或者是加载某一块的内容时），不用整个网页都要重新加载，来获取这个数据，这样可以更加有效的节省资源，这种感觉就像是，选择一家快递，其中一个人选择了一个小快递公司，这个公司送快递需要你自己去服务点拿快递，而你选择了大快递公司，送货上门，而且价钱都一样或者更少。

load()方法

因为本人也是在自学中，对于很多知识的理解可能不是很透彻，所以我对load()方法的理解就是，从其他网页加载当前网页所需的内容。以下代码是我从视频中学习的内容。

//html中相关代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>

<button id="trigger">协议</button>
<div id="card" style="display: none">

</div>

<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="JS/main.js"></script>
</body>
</html>

var trigger = $('#trigger');
var card = $('#card');
var loaded = false; //定义一个loaded变量并赋值false，我的理解就是定义一个flag

trigger.on('click',function () { //当用户点击按钮触发事件
    if(card.is(':visible'))//判断id为card的div是否已经显示
    {
        card.slideUp();//如果id为card的div内容没有显示，那么就显示，否则执行以下代码
    }
    else{
        if(!loaded) //如果loaded没有加载，就执行以下代码
        {
            card.load('result.html');//id为card的div加载result.html中的内容
            loaded = true;//并且让loaded为true
        }
            card.slideDown();//如果已经加载过result.html中的内容，那么就直接显示，不在请求
    }
    //toggle();
});

jQuery初学基础常用内容——AJAX

load()方法

猜你喜欢