jQuery 3.3.1中所有ajax调用的加载页面

jQuery是一种流行的JavaScript库，使开发人员更加便捷地操作网页中的HTML元素，处理事件以及使用Ajax进行服务器交互。

Ajax调用介绍

Ajax可通过浏览器无需刷新页面就能与服务器进行交互，使网站页面变得更加动态。使用jQuery，可以轻松地创建和处理Ajax请求。

在jQuery 3.3.1中，有多种方法可用于创建Ajax请求。下面是一些常见方法的介绍。

jQuery.ajax()

jQuery.ajax()是最常见的Ajax调用之一。可以通过传入一个对象作为参数来配置Ajax请求。对象中包含URL，请求类型，数据等信息。

以下是一个示例：

$.ajax({
  url: "example.php",
  type: "POST",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

在上面的代码中，url指定要发送请求的URL，type指定请求的类型，data指定要发送到服务器的数据。当请求成功时，会执行done()函数。

jQuery.get()

jQuery.get()方法可以让我们以GET方式请求数据。以下是一个示例：

$.get("example.php", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});

在上面的代码中，example.php是要请求的URL，function(data, status)是当请求成功时要执行的函数。

jQuery.post()

jQuery.post()方法可以让我们以POST方式发送数据给服务器。以下是一个示例：

$.post("example.php",
{
    name: "John",
    location: "Boston"
},
function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});

在上面的代码中，我们发送了一个包含名字和位置的数据，function(data, status)是当请求成功时要执行的函数。

加载页面

在使用Ajax请求时，我们通常需要在客户端显示正在加载的信息，以让用户知道数据正在请求中。以下是一些在jQuery中显示加载页面的示例。

jQuery.ajaxStart()和jQuery.ajaxStop()

这两个函数可以用来显示和隐藏一个加载页面。以下是一个例子：

$(document).ajaxStart(function(){
    $("#loading").show();
});

$(document).ajaxStop(function(){
    $("#loading").hide();
});

在上面的代码中，ajaxStart()函数在一个Ajax请求开始时被调用，然后#loading元素被显示。当所有的Ajax请求完成后，ajaxStop()函数被调用，#loading元素会被隐藏。

jQuery.ajaxSetup()

jQuery.ajaxSetup()函数可以用来设置所有Ajax请求共有的参数，比如beforeSend和complete。以下是一个例子：

$.ajaxSetup({
    beforeSend: function(){
        $("#loading").show();
    },
    complete: function(){
        $("#loading").hide();
    }
});

$.get("example.php",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
});

在上面的代码中，beforeSend在一个Ajax请求开始时被调用，然后#loading元素被显示。当所有的Ajax请求完成后，complete函数被调用，#loading元素会被隐藏。

结论

通过使用以上方法，可以很容易地在jQuery中创建Ajax请求，并且在请求过程中显示加载页面，为用户提供更好的体验。