【JQuery】常见的AJAX

JQuery实现AJAX

我们可以使用AJAX做些什么?

  • 不刷新页面更新网页
  • 在页面加载后从服务器请求数据
  • 在页面加载后从服务器接收数据
  • 在后台向服务器发送数据

json是Ajax发送小部分数据的一种轻量级数据格式,可以简单易懂的给服务器或浏览器交互数据,包括json对象,json数组对象。

JQuery库中已经封装了ajax请求的方法。

示例:

        $(function() {
            //请求参数
            let params = {}
            //ajax
            $.ajax({
                //请求方法,get或者post,默认是get
                type: "post",
                //预期服务器返回的数据类型
                dataType:"json",
                //内容编码类型
                contentType: "application/json;charset=UTF-8",
                //发送请求的地址(默认为当前页面)
                url: "http://localhost:8080/admin/dashboard",
                //发动到服务器的数据,要求是string或者Object类型,get请求中将附加在url后
                data: JSON.stringify(params),
                //默认为true,所有请求均为异步,设置为false则为同步请求
                async: "false",
                //设置为 false 将不会从浏览器缓存中加载请求信息。
                cache: "true",
                success: function (data, textStatus) {
                    console.log("请求成功后调用的回调函数")
                    console.log(data + "→服务器返回数据")
                    console.log(textStatus + "→服务器返回状态")
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest + "→XMLHttpRequest对象")
                    console.log(textStatus + "→错误信息")
                    console.log(errorThrown + "→(可能)捕获的错误对象")
                    console.log("请求失败时被调用的函数")},
                complete: function (XMLHttpRequest, textStatus) {
                    console.log(XMLHttpRequest + "→XMLHttpRequest对象")
                    console.log(textStatus + "→信息字符串")
                    console.log("请求完成后调用的回调函数(请求成功或失败时均调用)")
                }
            })
        })
上一篇:硬核,超详细Ajax工作原理及开发步骤总结


下一篇:JavaScript Day 4