首页 > 编程笔记 > Web笔记 > jQuery Ajax请求

jQuery $.ajax()方法的使用

前面几节,我们介绍了很多有关 Ajax 的方法,如 load()方法$.getJSON() 方法$.get() 方法$.post() 方法。事实上,这几种方法从本质上来说都是使用 $.ajax() 方法来实现的。换句话来说,它们都是 $.ajax() 方法的简化版,它们能实现的功能,$.ajax() 都能实现,因为 $.ajax() 是最底层的方法。

语法:

$.ajax(options)

$.ajax() 方法只有一个参数,这个参数是一个对象。该对象中包含了 Ajax 请求所需要的各种信息,并且以“键值对”的形式存在。

options 是一个对象,这个对象内部有很多参数可以设置,所有参数都是可选的,如表 1 所示。

表 1:$.ajax() 方法中的参数
参数 说明
url 被加载的页面地址
type 数据请求方式,"get" 或 "post",默认为 "get"
data 发送到服务器的数据,可以是字符串或对象
dataType 服务器返回数据的类型,如: text、html、script、json、xml
beforeSend 发送请求前可以修改 XMLHttpRequest 对象的函数
complete 请求“完成”后的回调函数
success 请求“成功”后的回调函数
error 请求“失败”后的回调函数
timeout 请求超时的时间,单位为“毫秒”
global 是否响应全局事件,默认为 true (即响应)
async 是否为异步请求,默认为 true (即异步)
cache 是否进行页面缓存,true 表示缓存,false 表示不缓存

举例:$.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>
默认情况下,预览效果如图 1 所示。
默认效果
图 1:默认效果

我们点击【获取数据】按钮后,此时预览效果如图 2 所示。
点击按钮后的效果
图 2:单击按钮后的效果

分析:
$.ajax({
    url:"info.json",
    type:"get",
    dataType:"json",
    success:function(data){
        ……
    }
})
上面这段代码其实等价于:
$.getJSON("info.json", function (data) {
    ……
})

举例:$.ajax() 代替 $.getScript()
<!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:"js/test.js",
                    type:"get",
                    dataType:"script"
                })
            })
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="加载"/>
</body>
</html>
默认情况下,预览效果如图 3 所示。
默认效果
图 3:默认效果

我们点击【加载】按钮后,可以看到控制台输出信息如图 4 所示。

控制台输出信息
图 4:控制台输出信息
分析:
一开始控制台是没有内容输出的,我们点击【加载】按钮后,才会尝试加载 test.js 这个文件。
$.ajax({
    url:"js/test.js",
    type:"get",
    dataType:"script"
})
上面这段代码其实等价于:
$.getScript("js/test.js")

所有教程

优秀文章