2021.12.30--jQuery--13Ajax操作

啊西边的瓜

于 2021-12-30 15:56:37 发布

阅读量172

点赞数

分类专栏：前端学习文章标签： jquery

本文链接：https://blog.csdn.net/qq_41083616/article/details/122229124

版权

前端学习专栏收录该内容

45 篇文章 0 订阅

订阅专栏

一 load()方法

load()方法来通过Ajax请求从服务器中获取数据，然后把获取的数据插入到指定的元素中。

$().load(url, data, fn)

在这里插入图片描述

二 $.get()方法

在jQuery中，我们可以使用$.get()方法来通过Ajax去请求服务器的数据。

$.get(url, data, fn, type)

在这里插入图片描述

三 $.post()方法

get()方法，我们还可以使用.post()方法来通过Ajax去请求服务器的数据。.get()和.post()在使用方式上差不多，不过两者还是有一定的区别。get方式不适合较大的数据量，并且它的请求信息会保存在浏览器缓存中，因此安全性不好；post方式不存在这两个方面的不足。

$.post(url, data, fn, type)

在这里插入图片描述

三 $.getJSON()方法

使用$.getJSON()方法来通过Ajax获取服务器中JSON格式的数据

$.getJSON(url ,data, function(data){
    ……
})

.getJSON()是一个全局方法，所谓“全局方法”，指的是直接定义在jQuery对象（即“$”）下的方法

tips: 由于该JSON本质上是一个数组，因此我们应该使用$.each()操作数组的方式，而不是操作对象的方法

四 $.getScript()方法

使用.getScript()方法通过AJAX来获取并运行一个外部JavaScript文件。.getScript()是一个用于动态加载JavaScript的方法。当网站需要加载大量JavaScript时，动态加载JavaScript就是一个比较好的方法。当需要某个功能时再将相应的JavaScript加载进来。
$.getScript()有以下两个优点。
（1）异步跨域加载JavaScript文件。
（2）可避免提前加载JavaScript文件，只有需要的时候才会去加载。这样可以减少服务器和客户端的负担，加快页面加载速度。

五 $.ajax()方法

如load()、.getJSON()、.get()、.post()。事实上，这几种方法从本质上来说都是使用.ajax()来实现的。换一句来说，它们都是.ajax()方法的简化版，它们能实现的功能，.ajax()都能实现，因为$.ajax()是最底层的方法。

$.ajax(options)

在这里插入图片描述

.ajax()代替.getJSON()```

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                $.ajax({
                    url:"info.json",
                    type:"get",
                    dataType:"json",
                    success:function(data){
                        //定义一个变量，用于保存结果
                        var str = "";
                        $.each(data, function (index, info) {
                            str += "姓名：" + info["name"] + "<br/>";
                            str += "性别：" + info["sex"] + "<br/>";
                            str += "年龄：" + info["age"] + "<br/>";
                            str += "<hr/>";
                        })
                        //插入数据
                        $("div").html(str);
                    }
                })
            })
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="获取数据" />
    <div></div>
</body>
</html>

啊西边的瓜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021.12.30--jQuery--13Ajax操作

一 load()方法load()方法来通过Ajax请求从服务器中获取数据，然后把获取的数据插入到指定的元素中。$().load(url, data, fn)二 $.get()方法在jQuery中，我们可以使用$.get()方法来通过Ajax去请求服务器的数据。$.get(url, data, fn, type)三 $.post()方法get()方法，我们还可以使用.post()方法来通过Ajax去请求服务器的数据。.get()和.post()在使用方式上差不多，不过两者还是有一定的区别
复制链接

扫一扫