今天做个简单的例子常见的前端 Ajax_Get/Post_Api 如何使用？（一）

写在前面

想写点好玩的东西，但又感觉要是写复杂了又比较难懂，所以还是做点简单的吧，所以，我们就简单做个例子，简单讲讲 Ajax_Get/Post 的使用，较为简单，做个了解即可，深入学习的的话还是建议先学 Html5+Css3 然后 Javascript+Es6+Jquery。

简单准备

我们就拿 “一言 Api” 做一个简单 Get 的入门，然后再用“彩虹云商城的 Api”做一个简单的 Post 请求

然后我们开始吧

一言 Api

文档：https://developer.hitokoto.cn/sentence/

这边复制了我们要用到的接口和参数

请求地址

请注意：一言域名已加入 HSTS 预加载计划，所有请求一律以 HTTPS 方法进行。

参数

完整参数太长可以到文档自行查看：点我直达

使用 一言 Api

我们先新建个 html 文档 命名 Demo.html

引用 MDUI 框架「力荐」点我直达

我们使用 MDUI 的 JavaScript 工具库足够帮助我们完成下面的简单开发

MDUI 内置了一个轻量的 JavaScript 工具库，它拥有和 jQuery 类似的 api 和 jQuery 风格的链式调用，但体积仅为 jQuery 的六分之一。

你可以通过 mdui.$ 来调用该库，但最好把 mdui.$ 存储到一个简短的变量中以方便调用，例如：

var $ = mdui.$;

在后面的文档中，都使用 $ 来表示 mdui.$。

我们先给页面写一个按钮当作触发器,

然后加上简单的 css 让它稍微赏心悦目一点

然后我们开始写上 JavaScript 代码 但是前提是你要加上 script 标签

实现思路

1.点击按钮后，我需要得到 一言 的 游戏 类的句子

2.然后我们要让它显示在 html 页面上

我们有了思路，就好实现了。

开始写 Javascript，但是我们前面要按照 MDUI 提示的，

你可以通过 mdui.$ 来调用该库，但最好把 mdui.$ 存储到一个简短的变量中以方便调用，例如：

var $ = mdui.$;

在后面的文档中，都使用 $ 来表示 mdui.$。

下面的代码我就一一放图了，我直接代码贴在这里方便大家阅读。

忘了，我们得先给我们的按钮起个 id 名字 这边以 getData 来命名

ok 接下来，我们开始写 JavaScript，可以认真看看。

我们再次回顾一下思路

点击按钮后，我需要得到 一言 的 游戏 类的句子

即然要点击按钮，我们就需要获取得到这个按钮，那么

在 MDUI 中。有着和 Jquery 类似的写法

我们先把 id 叫 getData 的按钮 获取过来

<script>
        // JavaScript代码写这里
        var $ = mdui.$; //把mdui的JavaScript工具库存到这个简短的变量中

        //正式代码
        $('#getData'); //获取名字为 getData 的按钮为什么要加 # 因为是id元素
  
  
    </script>

如上面写的，但是呢，我们并不知道有没有成功获取，怎么办？

把它打印出来，console.log

    <script>
        // JavaScript代码写这里
        var $ = mdui.$; //把mdui的JavaScript工具库存到这个简短的变量中

        //正式代码
        $('#getData');//获取名字为 getData 的按钮为什么要加 # 因为是id元素
        console.log($('#getData')); //打印验证一下 看看能不能获取
  
    </script>

然后我们如何看有没有获取呢？F12 浏览器 console

可以看到，我们获取到了，然后，我们给按钮绑定事件。也就是 .on( );

里面有两个属性**.on(怎么样触发它,触发了的返回值 )**

这么说可能不太清楚，我们用代码来表示一次

$('#getData').on(怎么样触发它或者理解为触发条件,触发后返回什么或者做什么理解为);

然后，我们要做的事点击事件，那么就是 click

ok,那么我们写上。

$(selector).on('click', 触发后返回什么或者做什么理解为);

我们写上了点击，那么，点击后该干什么呢？我们写上一个方法，function () { }

那么完整的写法，我们基本了解了，我们先写上，方便代码阅读，我们可以删掉之前的代码。

    <script>
        // JavaScript代码写这里
        var $ = mdui.$; //把mdui的JavaScript工具库存到这个简短的变量中

        //正式代码
        $('#getData').on('click', function () {
          //翻译，当id名为getData的按钮被点击后，应该干什么
        });
  
    </script>

那么，我们也不知道有没有写对，怎么办？执行打印一下

    <script>
        // JavaScript代码写这里
        var $ = mdui.$; //把mdui的JavaScript工具库存到这个简短的变量中

        //正式代码
        $('#getData').on('click', function () {
          //翻译，当id名为getData的按钮被点击后，应该干什么
          console.log('成功了！');
          //翻译，当id名为getData的按钮被点击后，就打印‘成功了’
        });
  
    </script>

然后 我们去点击按钮 试试。

证明是没有问题了，然后我们下一步吧

我们需要得到一言的游戏类型的句子，那么我们就需要用到 ajax 了，然后 MDUI 也是有 Ajax 的具体参数，我们可以使用。

关于 Ajax 的介绍，可以百度百度，我们直只使用。

我们先去 MDUI 看看 ajax 的文档,太长，完整的建议去看看 MDUI 提供的文档

然后我们回到打印‘成功了！’那一块，

先删除点多余的打印代码和注释

    <script>
        // JavaScript代码写这里
        var $ = mdui.$; //把mdui的JavaScript工具库存到这个简短的变量中
        //正式代码
        $('#getData').on('click', function () {
            //Ajax要放在这里面
        });

    </script>

我们是做的事 按钮点击后执行，所以，Ajax 需要放在这里面。

    <script>
        // JavaScript代码写这里
        var $ = mdui.$; //把mdui的JavaScript工具库存到这个简短的变量中
        //正式代码
        $('#getData').on('click', function () {
            //Ajax要放在这里面
            $.ajax({
                method: 'POST', //请求方式 我们改为GET
                url: './test.php',//请求地址 我们改成一言的
                data: {			//请求时，我们需要携带的参数
                    key1: 'val1',
                    key2: 'val2'
                },
                success: function (data) { //请求成功后，返回的数值，或执行什么事件
                    console.log(data);//打印成功后的返回值
                }
            });
        });

    </script>

通过我上面写的信息，应该都简单的了解了 Ajax，但是其实 Ajax 远远不止这些，但是本次文章讲的事简单的用法。

ok 我们对着一言文档改改。

句子类型（参数）

可选择多个分类，例如： ?c=a&c=c

返回编码（参数）

然后看看我们改的

    <script>
        // JavaScript代码写这里
        var $ = mdui.$; //把mdui的JavaScript工具库存到这个简短的变量中
        //正式代码
        $('#getData').on('click', function () {
            //Ajax要放在这里面
            $.ajax({
                method: 'GET',
                url: 'https://v1.hitokoto.cn/',
                data: {
                    c: 'c', //分类选择：c游戏类型
                    //分类选择也可以改成B例如
                    // c:'b',
                    encode: 'json' //返回编码 选择json
                },
                success: function (data) { //成功后执行
                    console.log(data);//打印
                }
            });
        });

    </script>

整体大概就是这样，

获取按钮，点击按钮，执行 Ajax 事件，得到成功返回值

那么 ok，改完我们直接点击按钮执行一次。

我们确实得到了，但是非常混乱，没有得到我想要的句子，那么我们就需要进行再次转为 json

dataType:'json' 然后 再执行一下，就清晰多了

但是这并没有解决我们的问题，我们要的是句子，显示这么多不该显示的，还是太乱了，怎么办？

那么就到返回值这一块处理了

返回值是返回给我们一整个 data

但是我们不需要啊，我们需要的是 data 里面的 hitokoto 也就是句子

那么，我们就在返回值 打印出 data.hitokoto

这样 就干净多了 ～ 思路

1.点击按钮后，我需要得到 一言 的 游戏 类的句子
2.然后我们要让它显示在 html 页面上

我们已经实现了第一步，那么 ok，如何第二步，如何让它显示在 html 页面上？

很简单，我们新建个标签 span 取个类名，就叫 text 吧

阅读 MDUI 提供的文档后

使用 .txt( ) 就能实现了！

上面学了怎么获取元素，那么道理相同

获取元素类名为 text 的元素，然后把它的 text 的值改为 data.hitokoto 即可。

我们来实现吧 ～

致此，一言 Api 的简单例子就做完了，然后如果认真看了的话 那么你就比较简单的掌握了 ajax 的最为简单的用法，还顺带学了点 js。

下面附上完整 JavaScript 代码

    <script>
        // JavaScript代码写这里
        var $ = mdui.$; //把mdui的JavaScript工具库存到这个简短的变量中
        //正式代码
        $('#getData').on('click', function () {
            //Ajax要放在这里面
            $.ajax({
                method: 'GET',
                url: 'https://v1.hitokoto.cn/',
                dataType: 'json',
                data: {
                    c: 'c', 
                    encode: 'json' 
                },
                success: function (data) {
                    console.log(data.hitokoto);
                    $('.text').text(data.hitokoto);
                }
            });
        });

    </script>

其实一言 api 提供了不少例子，对多少学过 JavaScript 的还是简单的，这次写这个，只是抛砖引玉罢了。

有更多更复杂的 api 等着你使用。

下一个例子，有空再更新。

如果你学会了如何使用，那么你就可以自己写一个属于自己的个人主页什么的，就可以去网上自己找点 get 的 api 玩。

对了，如果你删掉了下面红色方框框住的，那么就不用点击按钮，直接执行 ajax 哦 ～

这边就不放成品了，好好学习，天天向上 ～