jQuery中的Ajax

最新推荐文章于 2023-03-03 16:23:11 发布
最新推荐文章于 2023-03-03 16:23:11 发布
阅读量3.5k 收藏 1
点赞数 1
分类专栏： JSON jQuery 文章标签： ajax javascript json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cool_breeze_/article/details/108390753
版权
jQuery 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
JSON
10 篇文章 0 订阅
订阅专栏

jQuery中的Ajax

文章目录

jQuery不仅对JavaScript语言进行了封装，也对Ajax异步交互进行了封装。jQuery提供了六个Ajax操作的方法:

  • load()方法
  • $get()方法和 $.post()方法
  • $ajax()方法
  • $getScript(方法和 $getJSON()方法

jQuery除了封装了六个Ajax操作的方法，还提供了以下几种事件:

  • ajaxStart()和ajaxStop()事件

  • ajaxComplete()事件、ajaxSend()事件、ajaxError()事件和ajaxSuccess()事件

load()方法

load()方法是jQuery中最为简单的Ajax方法，其语法结构如下:

$element.load(url,[data],[callback]);

  • url: 请求HTML页面的url地址。

  • data: 发送给服务器端的key/value形式的数据内容。

  • callback: Ajax请求完成时的回调函数。

$('button').click(function() {
	$('div').load('server.js');
});

注意： load()方法的请求方式由是否传递参数决定。即不传递 data 参数，为GET方式;传递 data 参数，为POST方式。

代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>load()方法</title>
  </head>
  <body>
    <button>按钮</button>

    <script src="js/jquery-1.12.4.js"></script>
    <script>
      $("button").click(function () {
        /*
            load(url, [data], [callback])方法
            * 参数
                * url - 异步请求的地址
                * data - 异步请求的数据
                * callback - 异步请求成功后的回调函数
            * 返回值 - 服务器端的响应结果
            * 注意 - 自动将返回结果写入到目标元素中
        */
        $("button").load("data/server2.json", function () {
          console.log("异步请求成功...");
        });
      });
    </script>
  </body>
</html>

如果不传入data参数，默认为GET请求方式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>load()方法</title>
  </head>
  <body>
    <button>按钮</button>

    <script src="js/jquery-1.12.4.js"></script>
    <script>
      $("button").click(function () {
        /*
            load(url, [data], [callback])方法
            * 参数
                * url - 异步请求的地址
                * data - 异步请求的数据
                	* 如果省略请求数据的话，当前的请求数据的话，当前的请求方式为GET
                    * 如果发送请求数据的话，当前的请求方式为POST
                * callback - 异步请求成功后的回调函数
            * 返回值 - 服务器端的响应结果
            * 注意 - 自动将返回结果写入到目标元素中
        */
        $("button").load("data/server2.json", { name: "张无忌" }, function () {
          console.log("异步请求成功...");
        });
      });
    </script>
  </body>
</html>

如果传入data参数，默认为POST请求方式

在这里插入图片描述

$.get()与 $.post()方法

  • $get(方法使用GET方式向服务器端发送异步请求。其语法结构如下:

    $.get(url,[data],[callback],[type]);

  • url: 请求HTML页面的url地址。

  • data: 发送给服务器端的key/value形式的数据内容。

  • callback: Ajax请求完成时的回调函数。

  • type: 设置返回数据内容的格式。值为xml、html、script、json、text和_default。

$('button').click(function(){
	$.get('server.js',function(data, textStatus){
		//data:表示服务器端响应的数据内容
        //textStatus: success、error、notmodified和timeout四种请求状态之一
    });
});

代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>get()与post()方法</title>
  </head>
  <body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
      $("button").click(function () {
        /*
                get(url, [data], [callback], [type])方法 - 请求方式为GET
                * 参数
                    * url - 异步请求地址
                    * data - 异步请求的数据
                    * callback - 异步请求成功后的回调函数
              */
        $.get("data/server2.json", function () {
          console.log("异步请求成功啦...");
        });
      });
    </script>
  </body>
</html>

效果如下

可以看到，如果不传递 data 参数的话，默认为GET请求，并且请求URL是不带参数的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>get()与post()方法</title>
  </head>
  <body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
      $("button").click(function () {
        /*
                get(url, [data], [callback], [type])方法 - 请求方式为GET
                * 参数
                    * url - 异步请求地址
                    * data - 异步请求的数据
                    * callback - 异步请求成功后的回调函数
              */
        $.get("data/server2.json", { name: "张无忌" }, function () {
          console.log("异步请求成功啦...");
        });
      });
    </script>
  </body>
</html>

可以看到，如果传递 data 参数的话，默认也为GET请求，并且请求URL是带参数的

callback中响应结果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>get()与post()方法</title>
  </head>
  <body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
      $("button").click(function () {
        /*
                get(url, [data], [callback], [type])方法 - 请求方式为GET
                * 参数
                    * url - 异步请求地址
                    * data - 异步请求的数据
                    * callback - 异步请求成功后的回调函数
                        function(response){}
                    * type - 设置服务器端响应结果的格式
                        xml、html、script、json、text等
              */
        $.get("data/server2.json", { name: "张无忌" }, function (response) {
          console.log(response);
        });
      });
    </script>
  </body>
</html>

在这里插入图片描述

不传递type类型默认返回json格式的数据内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>get()与post()方法</title>
  </head>
  <body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
      $("button").click(function () {
        /*
                get(url, [data], [callback], [type])方法 - 请求方式为GET
                * 参数
                    * url - 异步请求地址
                    * data - 异步请求的数据
                    * callback - 异步请求成功后的回调函数
                        function(response){}
                    * type - 设置服务器端响应结果的格式
                        xml、html、script、json、text等
              */
        $.get(
          "data/server2.json",
          { name: "张无忌" },
          function (response) {
            console.log(response);
          },
          "text"
        );
      });
    </script>
  </body>
</html>

在这里插入图片描述

不传递type类型会返回指定格式的数据内容

$.post方法同样用法

$.ajax()方法

具体可以参考 jQuery文档 jQuery.ajax(url,[settings])

$ajax()方法是jQuery中最为底层的Ajax方法，其语法结构如下:

$.ajax(url,[settings]);

  • url: 请求HTML页面的url地址。

  • settings: key/value形式的请求设置，所有参数都是可选的。

$("button").click(function(){
	$.ajax({
		url:"server.js",
		type:"post",
		data:"this is ajax",
		success:function(data){
			console.log(data);//服务器响应回数据之后的处理逻辑
        }
	});
);

代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajax()方法</title>
  </head>
  <body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
      $("button").click(function () {
        /*
                $.ajax(url, [settings])方法
                * 参数
                    * url - 请求地址
                    * settings - 设置异步请求的参数
                * settings选项 - 对象类型
                    * type - 设置请求方式
                    * data - 发送给服务器端的请求数据
                    * dataType - 服务器端响应结果的格式
                    * success - 异步请求成功后的回调函数
                        function(data, textStatus, jqXHR){}
                            * data - 表示服务器端响应的结果
                            * textStatus - 表示服务器端当前的状态
                            * jqXHR - Ajax中的核心对象
            */
        $.ajax("data/server2.json", {
          type: "get",
          dataType: "text",
          success: function (data) {
            console.log(data);
          },
        });
      });
    </script>
  </body>
</html>

在这里插入图片描述

$.getScript()方法

$getScript(方法是jQuery中用于动态加载指定JavaScript文件，其语法结构如下:

$.getScript(url,[callback);
  • url: 请求JavaScript文件的url地址。
  • callback: 指定JavaScript文件成功加载后的回调函数。
$('button').click(function(){
	$.getScript('test.js');
});

代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>getScript()方法</title>
  </head>
  <body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
      $("button").click(function () {
        // 动态加载指定JavaScript文件，并且执行
        $.getScript("data/server3.js", function (data) {
          console.log(data);
          eval(data);
        });
      });
    </script>
  </body>
</html>

在这里插入图片描述

$.getJSON()方法

$getuJSON(方法是jQuery中用于动态加载指定JSON格式的数据内容，其语法结构如下:

$.getJSON(url,[data],[callback]);

  • url: 请求JavaScript文件的url地址。

  • data: 发送给服务器端的key/value形式的数据内容。

  • callback: 指定JavaScript文件成功加载后的回调函数。

$('button').click(function(){
	$.getJSON('test.json', function(data){
		console.log(data);
	};
};

代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>gtJSON()方法</title>
  </head>
  <body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
      $("button").click(function () {
        // getJSON()方法的请求方式为GET
        $.getJSON("data/server2.json", { name: "张无忌" }, function (data) {
          console.log(data);
        });
      });
    </script>
  </body>
</html>

在这里插入图片描述

Ajax的全局事件

加载请求： .ajaxStart() 和 .ajaxstop()

    $(document).ajaxStart(function(){
        $('.loading').show();
    }).ajaxStop(function(){
        $('.loading').hide();
    });

错误处理： .ajaxError()

    //1 $.ajax()使用属性提示错误
    $('form input[type=button]').click(function(){
        $.ajax({
            type:"post",
            url:"test1.php",
            async:true,
            data:$('form').serialize(),
            success:function(response,status,xhr){
                $('#box').html(response);
            },
//            timeout:3000
//            global:false
            error:function(xhr,errorText,errorType){
//                alert(errorText + ':' +errorType);
                alert(xhr.status + ':' +xhr.statusText);
            }
            
        });
    });
    
    //2 $.post()使用连缀.error()方法提示错误，将被.fail()取代
    $('form input[type=button]').click(function(){
        $.post('test1.php').error(function(xhr,errorText,errorType){
            alert(errorText + ':' +errorType);
            alert(xhr.status + ':' +xhr.statusText);
        });
    });
    
    //3 使用全局.ajaxError()方法
    $(document).ajaxError(function(event,xhr,settings,info){
        alert(event.type);
        alert(event.target);
        for(var i in event){ //打印出event的所有属性
            document.write(i + '<br />');
        }
    });

.ajaxSuccess()，对应一个局部方法：.success()，请求成功完成时执行。

.ajaxComplete()，对应一个局部方法：.complete()，请求完成后注册一个回调函数。

.ajaxSend()，没有对应的局部方法，只有属性 beforeSend，请求发送之前要绑定的函数。

    //$.post()使用全局
    $('form input[type=button]').click(function(){
        $.post('test.php',$('form').serialize());
    });
    
    $('document').ajaxSend(function(){
        alert(发送请求之前执行);
    }).ajaxComplete(function(response,status,xhr){
        alert('请求完成后，不管是否失败成功');
    }).ajaxSuccess(function(event,xhr,settrings){
        alert('请求成功后，不管是否成功');
    }).ajaxError(function(event,xhr,settrings){
        alert('请求失败后');
    });
    
    //$.post()使用局部
    $('form input[type=button]').click(function(){
        $.post('test.php',$('form').serialize()).success(function(){
            alert('请求成功后');
        }).complete(function(){
            alert('请求完成后');
        }).error(function(){
            alert('请求失败后');
        });
    });
    
    //$.ajax()使用属性
    $('form input[type=button]').click(function(){
        $.ajax({
            type:"post",
            url:"test1.php",
            async:true,
            data:$('form').serialize(),
            success:function(response,status,xhr){
                alert('请求成功后');
            },
            complete:function（){
                alert('请求完成后,不管失败成功');
            },
            beforeSend:function(){
                alert('发送请求之前');
            },
            error:function(xhr,errorText,errorType){
                alert('请求失败后');
            }
        });
    });

注：在 jQuery1.5 版本以后，使用**.success()、.error()和.complete()连缀的方法，可以用.done()、.fail()和.always()**取代。

码小余の博客
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery 异步执行事件
weixin_45472548的博客
09-18 898
常用选项参数介绍： url：请求地址 type：请求方法，默认为 get dataType：服务端响应数据类型 contentType：请求体内容类型，默认 application/x-www-form-urlencoded data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递 timeout：请求超时时间 beforeSend：请求发起之前触发 success：请求成功之后触发（响应状态码 200） error：请求失败触发 complete：请求完成触发
JQuery1.12.4实现的基本原理
qq_21294095的博客
06-26 2200
参考1.12.4版本的JQuery写了个基本实现原理：不得不说JQuery对原型的应用很巧妙。 首先讲清楚JQuery的设计目标： 用更简单的方式操作DOM 处理浏览器兼容性问题 兼容性不讲，主要是各种if else判断，纯属工作量问题。 那么JQuery到底是如何实现简单操作DOM的呢？ 先来看看，JQuery是如何使用的： JQuery是一个函数，调用JQuery函数返回JQuer...
jQuery版本的ajax实现方式（笔记）
天元白手的博客
02-19 298
一、导入js的文件： jquery-1.12.4.js 然后测试代码： <body> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> $(function(){ $("#user").blur(function(){ ...
jQuery学习笔记——使用jQuery处理Ajax
weixin_46271306的博客
01-27 218
一、HTTP协议 HTTP协议（HyperText Transfer Protocol)：超文本传输协议，协议就是一种约定，一种规范，规定了浏览器和服务器之间互相通信的一种规则，所有的WWW文件都必须遵守这个规则，约定就是请求（浏览器向服务器通信）和响应（服务器根据请求进行处理，返回给浏览器的结果） 请求报文：包括请求行、请求头、空行、请求体 请求行：post/get/put(请求方式) 、ie=utf-8(请求地址)、HTTP/1.1(HTTP的版本号) 请求头：Host:www.baidu.com(主
jQuery和ajax案例练习
m0_46467017的博客
03-03 1446
可以通过jQuery的last()和html()方法来实现。last()方法返回匹配元素集合中的最后一个元素，html()方法用于获取或设置元素的HTML内容。// li.remove() 删除li标签 }) });
jQuery中ajax错误调试分析
10-20
jQuery中把ajax封装得非常好。但是日常开发中，我偶尔还是会遇到ajax报错。本文进行简单分析一下ajax报错。需要的朋友可以参考下
jQuery中ajax获取数据赋值给页面的实例
10-18
下面小编就为大家分享一篇jQuery中ajax获取数据赋值给页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jquery 中ajax执行的优先级
10-24
本文给大家讲述的是个人再做用户注册的时候遇到的ajax执行优先级的问题，以及在网友们的帮助下，解决此问题的全过程，这里记录下来，分享给大家。
jQuery中Ajax的load方法详解
10-24
本文重点个大家讲解了几个jQuery中ajax的load()方法的使用实例，load()方法是jQuery中最为简单和常用的Ajax方法，能远程载入HTML代码并插入DOM中
jQuery中ajax请求后台返回json数据并渲染HTML的方法
10-18
今天小编就为大家分享一篇jQuery中ajax请求后台返回json数据并渲染HTML的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
终于搞定了jquery的ajax提交数据
热门推荐
知行合一
02-08 2万+
通过Jquery的ajax方式来提交相应的数据，原以为是个很简单的方式，却不想折腾了好久 这个东西我不知道是不是 jquery 的一个bug 搞了N久哦 function MyService(id1, param) { var _json = jQuery.param({ "code": "blank", "id": "20130209" }); var request =
jQuery中的Ajax（全）
皖林的博客
10-07 6771
小结 　　1，基础：从load讲起，依次有get、post、getJSON、getScript、ajax 　　2，增强：jsonp、全局函数、jqXHR 　　3，高级：缓存相应，截流、数据类型转换、预过滤器、替代传输机制。 　　4，工具函数：serialize、serializeArray、$.param
点击图片时，出现遮雾罩并放大图片。
weixin_30558305的博客
07-16 499
hovertreeshow.css .hovertreeshowcover { position:fixed; z-index:99; width:100%; height:100%; background-color:silver; top:0px; left:0px; opacity:0.5; } .hovertreeshowlayer ...
简单的jquery Ajax进行登录！
weixin_30918415的博客
12-18 183
本案例包括login.html、login.php、jquery-1.12.0.min.js三个文件，只需将这三个文件放到同一文件夹下，即可运行。 login.html： <!DOCTYPE html><html><head> <title>jquery Ajax!</title> <meta charset="utf-8"&g...
jquery与ajax多选,jQuery 提供多个与 AJAX 有关的方法。
weixin_29260291的博客
08-06 387
jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。jQuery 不是生产者，而是大自然搬运工。jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject注：2.+版本不再支...
jQuery初识 - jQuery是什么
码小余の博客
06-17 1万+
jQuery jQuery是什么 jQuery是一 款优秀的JavaScript库 ,从命名可以看出jQuery最主要的用途是用来做 查询(jQuery=js+Query) ，正如jQuery官方Logo副标题所说 (write less, do more)使用jQuery能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax 变得更加简单 使用原生 js 查找DOM元素 window.onload = function (event) { var div1 = document.ge
jQuery初识 - jQuery中的方法
码小余の博客
06-17 4121
jQuery的attr方法 attr(name|pro|key,val|fn) ​ 作用：获取或者设置属性节点的值 ​ 可以传递一个参数，也可以传递两个参数 ​ 如果传递一个参数，代表获取属性节点的值 ​ 如果传递两个参数，代表设置属性节点的值 ​ 注意点： ​ 如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值 ​ 如果是设置：找到多少个元素就会设置多少个元素 ​ 如果是设置：如果设置的属性节点不存在，
jQuery版三级联动案例
码小余の博客
09-03 3591
jQuery版三级联动案例 首先写一个JSON数据 [ { "province": "吉林省", "cities": [ { "city": "长春市", "counties": ["朝阳区", "经济开发区", "高新区"] }, { "city": "吉林市", "counties": ["东城区", "经济开发区", "老城区"] }, {
jquery中ajax的使用
最新发布
09-30
jQuery中的ajax用于通过异步HTTP请求与服务器进行数据交互。它可以用于向服务器发送请求并接收响应，以更新网页内容而无需刷新整个页面。使用jQuery中的ajax，你可以通过以下几个方面来实现： 1. 基本使用：通过调用$.ajax()函数来发送HTTP请求，并在成功或失败时执行相应的回调函数来处理响应。你可以指定请求的URL、请求类型（GET、POST等）、数据类型（JSON、XML等）、请求参数、请求头等信息。 2. 回调事件：在ajax请求的不同阶段，可以注册各种回调函数来执行特定的操作。例如，你可以使用ajaxStart()和ajaxStop()函数来在ajax请求开始和结束时执行相应的操作，比如显示和隐藏加载提示。 3. 高度封装函数：除了使用基本的$.ajax()函数，jQuery还提供了一些高度封装的函数，比如$.get()、$.post()、$.getJSON()等，用于简化常见的ajax请求操作。 4. 全局事件：jQuery还提供了一些全局事件，比如ajaxStart、ajaxStop等，可以在整个文档对象上注册，当有ajax请求发生时触发相应的事件。 以上是jQuery中ajax的基本使用和相关特性。通过这些功能，你可以更方便地进行异步数据交互，提升用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码小余の博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值