【JQuery中的Ajax】

于 2020-09-08 14:43:05 发布
阅读量366 收藏
点赞数
文章标签： ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44966759/article/details/108453618
版权

JQuery中的Ajax

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

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

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

  • ajaxStart()事件
  • ajaxStop()事件
  • ajaxStop()事件
  • ajaxComplete()事件
  • ajaxSend()事件
  • ajaxError()事件
  • ajaxSuccess()事件
load()方法

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

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

  • url：请求HTML页面的url地址。
    • 异步请求的地址
  • data：发送给服务器端的key/value形式的数据内容
    • 如果省略请求数据的话，当前的请求方式为GET
    • 如果发送请求数据的话，当前的请求方式为POST
  • callback：Ajax请求完成时的回调函数。
    • 异步请求成功后的回调函数
  • 返回值 - 服务器端的响应结果
  • 注意 - 自动将返回结果写入到目标元素中
$('button').click(function(){
    	$('div').load('server.js');
});

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

在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>load()方法</title>
</head>
<body>
<button>按钮</button>
<script src="js/jquery.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>
$.get()与$.post()方法

1.$.get()方法使用GET方式向服务器端发送异步请求。语法结构如下：

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

2.$.post()方法使用POST方式向服务器端发送异步请求。语法结构如下：

$.post(url,data,callback,type）方法

  • url：请求HTML页面的url地址。
  • data ：异步请求的数据
  • callback ：异步请求成功后的回调函数
  • 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">
    <title>get()与post()方法</title>
</head>
<body>
<button>按钮</button>
<script src="js/jquery.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);
        },'json');
        /*
            $.post()方法 - 请求方式为POST
            * 参数
             * url - 异步请求的地址
             * data - 异步请求的数据
            * callback - 异步请求成功后的回调函数
                function(response){}
            * type - 设置服务器端响应结果的格式
                xml、html、script、json、text等
         */
    });
</script>
</body>
</html>
$.ajax()方法

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

$.ajax(url,[settings]);

  • url：请求HTML页面的url地址。
  • settings:key/value形式的请求设置，所有参数都是可选的。
  • settings选项 - 对象类型
    • type - 设置请求方式
    • data - 发送给服务器端的请求数据
    • dataType - 服务器端响应结果的格式
    • success - 异步请求成功后的回调函数
      • function(data,textStatus,jqXHR){}
        • data - 表示服务器端响应的结果
        • textStatus - 表示服务器端当前的状态
        • jqXHR - Ajax中的核心对象
$("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">
    <title>ajax()方法</title>
</head>
<body>
<button>按钮</button>
<script src="js/jquery.js"></script>
<script>
    $('button').click(function(){
        /*
            $.ajax(url,[settings])方法
            * 参数
                * url - 请求地址
                * setting - 设置异步请求的参数
            * 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');
});

wMlpc9.gif

代码示例：

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

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

$.getJSON(url,[data],[callback]);
  • url：请求JavaScript文件的url地址。
  • data：发送给服务器端的key/value形式的数据内容。
  • callback：指定JavaScript文件成功加载后的回调函数。
$('button').click(function(){
    	$.getJSON('test.josn',function(data){
        		console.log(data);
    });
});

在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getJSON()方法</title>
</head>
<body>
<button>按钮</button>
<script src="js/jquery.js"></script>
<script>
    $('button').click(function(){
        // getJSON()方法的请求方式为GET
        $.getJSON('data/server2.json',{name:'张无忌'},function(data){
            console.log(data);
        });
    });
</script>
</body>
</html>
华惜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中的Ajax
Hydra的博客
10-11 667
Ajax概述 Ajax全称为："Asynchronous JavaScript and XML"（异步JavaScript和XML），它并不是JavaScript的一种单一技术，而是利用了一系列交互式网页相关技术所形成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。 什么是Ajax？ Ajax = 异步JavaScript和XML。 Ajax是一种...
JQuery中的AJAX
IAN27的博客
05-07 192
1. 在JQuery中发送AJAX请求 1）引入JQuery bootcdn.cn 搜索 JQuery 复制标签链接到代码中 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 案例 页面三个按钮：GET 、 POST 、 通用型方法AJAX 点击按钮分别实现其功能 <!DOCTYPE html> <html lang="en"> <
JQuery中的$.getScript()和$.getJSON()方法的使用
pan_junbiao的博客
07-30 2786
1、$.getScript()方法的使用 有时候，在页面初次加载时就取得所需的全部 JavaScript 文件是完全没有必要的。虽然可以在需要哪个 JavaScript 文件时，动态地创建<script>标签，JQuery代码如下： $(document.createElement("script")).attr("src","/js/test.js").appendTo("head"); 或者： $("<script type='text/javascript' src='/
jQuery.getScript() 函数详解
weixin_36489704的博客
06-29 3242
| | |https://codeplayer.vip/p/j7sse |–|--| | | | jQuery.getScript()函数用于通过HTTP GET形式的加载JavaScript文件并运行它。 该函数用于动态加载JS文件，并在全局作用域下执行文件中的JS代码。 该函数可以加载跨域的JS文件。请注意，该函数是通过异步方式加载数据的。 该函数属于全局jQuery对象。 语法 jQuery 1.0 新增该静态函数。 复制 JavaScript: jQuery.getScript( url [
为什么选择$.getScript()？
stationalz的博客
07-13 1456
在学习AJAX的过程中，一直都很好奇，与$.getScript( )他们两的作用应该是非常相似的。他们都是加载其他的脚本文件，而很多网站上，他们都强调$.getScript( )的重要性及优点，$.getScript( )到底有什么优点？ $.getScript(url, function(){...}) 有点：      1、 异步跨域加载Script文件；      2、 等到需
jquery $.getScript优缺点
Winnie 的博客
03-16 4821
目前做的主题，含有大量的js，以前是全部压缩到2个文件里的，两个文件都很大，在现代浏览器中运行毫无压力。但是，对于残疾的ie来说，那简直就是受罪。会随机出现以下状况： 1、js加载无任何错误，但就是没有特效。 2、js加载总是失败。 3、js加载过慢，导致用户失去耐心。 4、js加载过多，导致浏览器性能下降不少。 目前这款主题，是越做越杂了，超过了当时简洁的想法，几乎涵盖了所有能想到的内
JQuery学习笔记14——$.getScript()方法
weixin_30263277的博客
07-16 227
$.getScript()方法用来直接加载.js文件，不需要对JavaScript文件进行处理，javascript会自动执行。1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<h...
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
11-27
jquery中ajax请求后台数据成功后既不执行success也不执行error，此外系统报错：Uncaught SyntaxError: Unexpected identifier at Object.success，但后台能够返回数据，原代码如下： var source=[]; $.ajax({ ...
jQuery中ajax的使用与缓存问题的解决方法
12-07
1:GET访问 浏览器 认为 是等幂的就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]...谈Ajax的Get和Post的区别 Get方式:用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的
jquery 中ajax执行的优先级
10-24
3. jQuery中的AJAX方法：jQuery简化了AJAX操作的编程模型，提供了$.ajax、$.get、$.post等方法，可以方便地实现AJAX调用。 4. 回调函数在异步处理中的应用：在异步操作中，回调函数用于指定操作完成后要执行的代码...
jquery的$getjson调用并获取远程的JSON字符串问题
10-27
jQuery中常用getJSON来调用并获取远程的JSON字符串，将其转换为JSON对象，如果成功，则执行回调函数,本文将详细介绍，需要的朋友可以参考下
基于jQuery的$.getScript方法去加载javaScript文档解析
11-27
1.两个文件的代码如下： [removed] function Ajax(){ //将9-4.html中的Ajax()函数进行修改 $.getScript('9-8.js',function(data){ var html ="<table border='1' cellpadding='2'>"; $.each(comments, function(Index, comment) { html += '<tr><td>' + comment.username + ':</td><td>' + comment['content'] + '</td></tr>'; }) /
JQuery中Ajax的操作完整例子
10-20
本文主要介绍JQuery中Ajax操作的完整实例，包括JQuery中Ajax操作的基本概念和使用方法。同时，还涉及了Java软件开发中后台代码封装的框架、前台页面效果实现所用的JavaScript以及jQuery的优势，最后提出了处理大数据...
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
10-22
以上内容详细介绍了jQuery中Ajax全局事件的引用方式和各个事件的执行顺序，希望对想要在Web开发中使用jQuery处理Ajax请求的开发者有所启发和帮助。通过合理利用这些事件，可以使网页的用户体验更加流畅和友好。
$.getScript()方法
weixin_30642267的博客
04-20 746
<!DOCTYPE html><meta charset="utf-8"><html><head> <title>1111</title> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script><...
JQuery中的$.getScript()、$.getJson()和$.ajax()方法
热爱思考、活力满满、开朗爱笑的年轻人
09-27 7368
$.getScript()有时候，在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个JavaScript文件时，动态地创建<script>标签，jQuery代码如下：$(document.createElement("script")).attr("src","test.js").appendTo("head");或者$("<script type='tex
js进阶 14-5 $.getScript()和$.getJSON()方法的作用是什么
weixin_34417183的博客
07-20 217
js进阶 14-5 $.getScript()和$.getJSON()方法的作用是什么 一、总结 一句话总结：$.getScript()和$.getJSON()方法专门用来加载JS/JSON文件（远程或本地）   1、jquery中的ajax如何调用一个js文件并执行？ $.getScript()带第一个参数url即可 19 $('#btn').click(functi...
$.getScript()的使用
limengmeng9006的专栏
03-15 2097
getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。   示例： $("button").click(function(){ $.getScript("demo_ajax_script.js"); }); 通常时候使用不到，不过当动态插入一些html代码的时候，有时候会遇到需要重新载入相应的js文件。
$ .getScript多个脚本
11-13 398
这是加载多发脚本包含的代码，你想，只有当所有的脚本已经被加载运行的回调函数是非常有用的。 要加载脚本多发性你需要增强AJAX $ .getScript（）函数来处理多发的脚本，然后只需将它们添加到一个数组的第一个参数，回调函数作为第二个参数。 单jQuery的获取脚本 $.getScript('script1.js', function(data, textStatus) { //d...
jquery中ajax的使用
最新发布
09-30
使用jQuery中的ajax，你可以通过以下几个方面来实现： 1. 基本使用：通过调用$.ajax()函数来发送HTTP请求，并在成功或失败时执行相应的回调函数来处理响应。你可以指定请求的URL、请求类型（GET、POST等）、数据类型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值