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

前沿

虽然现在工作上基本用不到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