前沿

虽然现在工作上基本用不到JQ了大家都用VUE或者react，但毕竟JQ也撑起了一个时代，闲暇时间整理了一下JQ调用AJAX的一些方法，以及一些供初学者学习用的接口（注：接口网上找的，如果侵权请联系我）。好了废话不多说，开始干货吧

关于AJAX（百度百科）

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
其实我理解的就是能从服务器获取数据，并且现在这个技术是最新的，大家都在用，至于什么性能问题也不是小白该考虑的（手动狗头）

JQ调用AJAX实例

1.jQuery的load()方法

load()方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：
$("selector").load(url,data,callback);
必须的url参数规定记载的url地址
可选的data参数规定与请求一同发送的查询字符串键/值对的集合
可选的callback参数是load()方法完成后所执行的函数名称
实例：

1、
$('#btn').click(function(){//只传一个url，表示在id为#new-projects的元素里加载index.html$('#new-projects').load('./index.html');
})
2、
$('#btn').click(function(){//只传一个url，导入的index.html文件含有多个传递参数，类似于：index/html?name='张三'$('#new-projects').load('./index.html',{"name":'张三',"age":12});
})
3、//加载文件之后，会有个回调函数，表示加载成功的函数$('#new-projects').load('./index.html',{"name":'张三',"age":12},function(){});

2.jquery的getJSON方法

jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据，并对数据进行解析，显示到页面中
语法：
$.getJSON(url,[data],[callback])
url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后执行的函数
实例：

  $.getJSON("./data/getJSON.json", function (data) {var str = "";//初始化保存内容变量$.each(data, function(index,ele) {$('ul').append("<li>"+ele.name+"</li>")});})

3.jquery的$.get()方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据#
语法:
$.get(URL,callback);

url参数规定你请求的路径，是必需参数，callback参数为数据请求成功后执行的函数
实例：

                $.get('./data/getJSON.json',function(data,status){console.log(status);   //success    200状态码 ok的意思
})

4.jquery的post()方法

与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面#
语法：$.post(URL,data,callback);

url参数规定你请求的路径，是必需参数，可选的data参数是连同请求发送的数据。可选的callback参数为数据请求成功后执行的函数

 $.post('/index',{name:'张三'},function(data,status){console.log(status);})

5. jquery的$.ajax()方法

敲重点！敲重点！最常用的方法，没有之一
//get()方式

$.ajax({url:url,type:'get',dataType:'text',success:function(data){console.log(data)},error:function(error){console.log(error)}

//post()方式

$.ajax({url:url,type:'post',data:{name:'张三',age:12},success:function(data){console.log(data)},error:function(error){console.log(error)
}

免费接口

这是我从网上找的，也不是我写的，供学习使用在好不过了，亲测能用。用jquery的$.ajax()方法调用把url地址换了即可，注意请求方法。

获取一条数据
请求地址：https://autumnfish.cn/api/joke
请求方法：get
请求参数：无
响应内容：随机笑话
获取多条数据
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num
参数名：num
参数说明：笑话条数
备注：类型为数字,不要给错了
响应内容：JSON

{"msg": "获取10条笑话","jokes": ["为什么古装剧里总是有女人会对恩人说：小女子无以为报，唯有以身相许，古代真的存在这种现象吗？ 扯淡，那是因为她喜欢他，要是不喜欢，她就会说：小女子无以为报，唯有来生再报了。","刚才玩了一把狼人杀，网杀。 我是最后一头狼了，悍跳预言家。 游戏已经进行到了三对一，而我主导着好人阵营的风向，本来都已经说好了共同出4。然后我随便刀死一个获得胜利，美滋滋。 结果，在我的发言阶段……正在尽力表演的时候…… 我的舍友突然在旁边大喊了一声…… 卧槽，你居然是狼人！","昨天从外地回来，没回家，今天到家看到老爸醉熏熏地在沙发上。老爸：“什么时候回来的？”我：“昨晚回来的”。他大怒道：“坐碗回来的？怎么不坐盆回来？”我。。。","路上看到一个黑色塑料袋踢了一脚特么是一条睡着的大黑狗，涕泗横流的被追了三里地。","一个胆小紧张的证人正在接受律师的询问。 律师厉声问道：“你是否结过婚？” “是的，我结过一次。”证人声音很小，还有些颤抖。 “那么你和谁结婚了？” “一个女人。” 律师有些发怒，“废话，你当然是和一个女人结婚了。你听说过有谁会和一个男人结婚吗？” 证人颤抖着说：“听说过，我姐姐”。","一位女明星走进鞋店，试了好几双鞋子都不合脚，老板亲自蹲下来替她量脚的尺寸。这位女明星有些近视，看见老板的秃头，以为是自己的膝盖露出来了，便用裙子将它盖住，然而，她立即听到老板的一声闷叫：“真混蛋，又停电了。”","重庆江北北宾路，一酒驾司机被交警拦下.就在他下车一瞬间，这哥们抄起瓶五粮液，一扬脖就喝了半瓶.然后边喝边说，“我不是酒后驾车，我是驾后喝酒.现在我喝了酒，不能开车了，不然要拘6个月.我车就停这，乱停车你们开罚单，拖走也行.我打车走了，明再来提车”.交警茫然...","昨晚喝多了，老婆不在家，让女儿给我倒杯糖水解酒。女儿问：“什么糖都行吗？”我说行。几分钟后，只见女儿颤巍巍的端来一杯水，上面飘着几块口香糖。","昨天发现楼下小摊有5块钱一个的高仿iPhone7模型，于是买了一个然后在一个人多的广场河边假装打电话:“妈蛋，给劳资滚，劳资不会原谅你的，分手吧”然后潇洒的把手机模型扔到了河里，拿出一根烟，故作忧郁的在那里摆了个销魂的姿势站着，看着旁边好多妹子用那花痴的表情看着我。正在我为今天晚上是双飞还是群P伤透脑筋的时候，一个小盆友过来拍了拍我，大声的对我说:“叔叔，你的手机浮上来了。。。最讨厌小盆友了","晚上打的，我：“师傅，服务卡上是你吗？” 他：“是的。” 我：“我看你开车技术很好啊？” 他：“还行吧。” 我：“看你这水平，你以前开过赛车吧？” 他不自信的装B道：“是呀，是呀！这你都能看得出来。” 我：“那是，喜欢兜圈子是不是开赛车留下的职业病？” 他。。。"]
}

用户验证
验证用户名是否可用
请求地址：https://autumnfish.cn/api/user/check
请求方法：post
请求参数：username
参数名：username
参数说明：用户名
备注：不能为空,通过 send 方法传递，格式为 key=value
响应内容：该用户名是否可用
用户注册
注册用户
请求地址：https://autumnfish.cn/api/user/register
请求方法：post
请求参数：username
参数名：username
参数说明：用户名
备注：不能为空，格式为 key=value
响应内容：注册成功或失败
根据id查询数据
根据英雄姓名查询英雄的外号
请求地址：https://autumnfish.cn/api/hero/simple
示例：https://autumnfish.cn/api/hero/simple?name=提莫
请求方法：get
请求参数：name
备注：name不能为空,直接跟在 url 后，格式 name=xxx
响应内容：英雄的外号
根据name查询多条数据
请求地址：https://autumnfish.cn/api/hero/info
示例：https://autumnfish.cn/api/hero/info?name=提莫
请求方法：get
请求参数：name
备注：name不能为空,直接跟在 url 后，格式 name=xxx
响应内容：

{"title": "迅捷斥候","name": "提莫","bg": "http://img1.dwstatic.com/lol/1512/315320556654/1451366974753.jpg","icon": "http://img.dwstatic.com/lol/1310/246295394773/1382341114833.png","story": "Teemo还有个隐藏被动技能，就是长了个全球嘲讽脸。每次团战必然会被敌方坦克和刺客类英雄集火，你的工作就是要用蘑菇风筝每一个攻击你的人，保持活着，有可能的话顺便杀个人。"
}

根据name查询详情
根据英雄姓名查询英雄的详细信息

请求地址：https://autumnfish.cn/api/hero/detail
示例：https://autumnfish.cn/api/hero/detail?name=提莫
请求方法：get
请求参数：name
备注：name不能为空,直接跟在 url 后，格式 name=xxx
响应内容：

{"title": "迅捷斥候","name": "提莫","bgs": ["http://img1.dwstatic.com/lol/1512/315320556654/1451366974753.jpg","http://img4.dwstatic.com/lol/1512/315320556654/1451366988149.jpg","http://img2.dwstatic.com/lol/1601/317240712104/1453285617943.jpg","http://img3.dwstatic.com/lol/1601/317240712104/1453285624688.jpg","http://img3.dwstatic.com/lol/1601/317240712104/1453285633565.jpg","http://img.dwstatic.com/lol/1601/317240712104/1453285642044.jpg","http://img2.dwstatic.com/lol/1601/317240712104/1453285650321.jpg","http://img5.dwstatic.com/lol/1601/317240712104/1453285656991.jpg","http://img2.dwstatic.com/lol/1601/317240712104/1453285664288.jpg"],"tags": ["魔法", "射手"],"icons": ["http://img.dwstatic.com/lol/1310/246295394773/1382341114833.png","http://img4.dwstatic.com/lol/1512/315320556654/1451366964489.jpg","http://img5.dwstatic.com/lol/1601/317240712104/1453285557655.jpg","http://img2.dwstatic.com/lol/1601/317240712104/1453285565958.jpg","http://img.dwstatic.com/lol/1601/317240712104/1453285572965.jpg","http://img.dwstatic.com/lol/1601/317240712104/1453285579908.jpg","http://img.dwstatic.com/lol/1601/317240712104/1453285586550.jpg","http://img4.dwstatic.com/lol/1601/317240712104/1453285592508.jpg","http://img2.dwstatic.com/lol/1601/317240712104/1453285599012.jpg"],"ability": {"life": "30","physical": "50","magic": "70","difficulty": "40"},"story": "Teemo还有个隐藏被动技能，就是长了个全球嘲讽脸。每次团战必然会被敌方坦克和刺客类英雄集火，你的工作就是要用蘑菇风筝每一个攻击你的人，保持活着，有可能的话顺便杀个人。"
}

写入数据
请求地址：https://autumnfish.cn/api/cq/add
请求方法：post
请求参数：heroName,heroSkill,skillName

参数名	参数说明	备注
heroName	英雄名	不能为空
heroIcon	技能图片	不能为空
skillName	技能名	不能为空

响应内容：JSON

{"msg": "新增成功","code": 201,"info": {"heroIcon": "https://autumnfish.cn/api/cq/static/5f89c6f2c695d7126d2768bda47fd7e9","heroName": "超级舞王","skillName": "跳舞"}
}

原文章地址：https://gitee.com/Li0101/AjaxApi/blob/master/README.md

手把手教你用JQ调用ajax（附免费永久后台URL）相关推荐

手把手教你用JAVA调用Websocket实现“声音转换”功能（变声）标贝科技
手把手教你用JAVA调用Websocket实现"声音转换"功能(变声)标贝科技前言什么是声音转换? 基于深度学习和迁移学习技术,精准将原说话人的声音转换为目标说话人,同时保留原 ...
手把手教你用Python调用SCIP求解最优化模型
手把手教你用Python调用SCIP求解最优化模型一个简单的例子 Python调用SCIP求解最优化模型的一般步骤创建模型对象创建决策变量设置目标函数创建约束创建一般约束创建广义约束求 ...
android调用相机与相册的方法,手把手教你：android调用系统相机、相册功能，适配6.0权限获取以及7.0之后获取URI(兼容多版本)...
Android中调用系统相机来拍摄照片的代码,以下:html 一.首先设置Uri获取判断以及相机请求Codejava public final int TYPE_TAKE_PHOTO = 1;//Ur ...
独家 | 手把手教你学习R语言（附资源链接）
作者:NSS 翻译:杨金鸿术语校对:韩海畴全文校对:林亦霖本文约3000字,建议阅读7分钟. 本文为带大家了解R语言以及分段式的步骤教程! 人们学习R语言时普遍存在缺乏系统学习方法的问题.学习者 ...
短信验证码、身份证实名、手机三要素实名三步走，手把手教你API接口调用，示例可使用
短信验证码.身份证实名.手机三要素实名三步走满满的都是干货分享,获取对应的AppKey后代码可运行:python3环境众所周知,系统非法登录.登录密码撞库.数据泄露.用户信息不真实等情况是信息系统 ...
超级干货：手把手教你学习R语言（附资源链接）
作者:NSS:翻译:杨金鸿:校对:韩海畴,林亦霖: 本文约3000字,建议阅读7分钟. 本文为带大家了解R语言以及分段式的步骤教程! 人们学习R语言时普遍存在缺乏系统学习方法的问题.学习者不知道从哪开 ...
手把手教你封装exe安装程序----附打包程序资源
有时我们需要将软件的的多个文件或者是绿色软件.非安装类软件,打包成一个可执行的exe安装程序,方便进行安装.EXE封装的工具和方法有很多种,本文以Inno Setup软件为例,介绍简单的向导模式,下面 ...
【java家教系统】手把手教你制作计算机毕业设计（附源码+课件）
很多大四同学苦于没有参考的毕设资料,或者下载的资料不全.代码有问题,数据有问题等等,造成毕设出现问题影响大学毕业.现在,免费提供项目源码和视频教程,让大家在短时间内可以完成自己的毕业设计. 对于jav ...
手把手教你用Python调用彩云机器翻译API
一.引言彩云这个小而美的机器翻译一直很低调,它让人眼前一亮的是之前我们分享的网页翻译插件,可以把外文网站翻译成英中对照的样式,便于我们学习.之前我们也写过文章介绍过: PythonFan:如何用Go ...

手把手教你用JQ调用ajax（附免费永久后台URL）

关于jQ的Ajax操作

前沿