Axure中使用JS实现接口调用

注意:此教程面向有类似需求和兴趣爱好者,无此应用的同学勿入,以免产生不适!

需求推动创造!

刚刚完成了一个企业培训。

这家企业因为自身业务需求,要求原型的保真程度已经是我所见过的企业中最高的了。

在培训结束后的讨论中,出现了这样的一个需求:根据输入的汉字形成拼音的首字母索引。

也就是说,当输入“小楼”需要得到一个“x”保存为索引。

直接通过Axure现有的功能是无法完成的,实际上即便是在编程开发中,这样的功能也需要有汉字与拼音相对应的数据库表,通过SQL语句完成。

我的第一反应是网上可能有将汉字转为拼音的API提供。

通过百度查询,发现了一个可用的API:https://helloacm.com/api/pinyin/?s=需要获取拼音的参数字符串

这个接口提供了将汉字或者汉字语句转为拼音的功能,大家点一下上方的链接,就能够看到转换结果。

{"result":["xu","yao","huo","qu","pin","yin","de,di","can","shu","zi","fu","chuan"]}

这个结果是JSON格式的数据内容。

有了这个接口之后,要做的就是将用户输入内容的第一个汉字截取后,作为上述链接的参数,进行拼音的获取。

但是,通过什么来访问这个链接,如何把这个链接返回的数据获取到是一个很大的问题。

刚好,我前段时间学习Python的时候,顺便研究了JQuery的一些基础。

我知道通过JS可以实现接口调用,并且能够将调用结果获取到之后进行处理。

但是实际的代码,我是不会写的。

继续借助百度搜索,查询到了通过JS调用接口的实现方法。

$.ajax({
    method: "POST",
    url: "some.php",
    data: { name: "John", location: "Boston" }
}).done(function( msg ) {
    alert( "Data Saved: " + msg );
});

在这段代码中,url是接口地址,data是参数字典,msg是完成接口访问时返回的数据。

知道了这些内容,我们就可以进行代码的改造。

新的代码如下:

$.ajax({
    method: 'POST',
    url: 'https://helloacm.com/api/pinyin/',
    data: {s: '[[Varl1.charAt(0)]]'}
}).done(function(msg){
    $axure.setGlobalVariable('pinyin', JSON.stringify(msg['result']));
}).xiaolou;

注意:红色字符能保佑你在各个浏览器兼容。

新的代码中,data参数字典的内容为“s:汉字”,对应接口地址中的参数部分“s=需要获取拼音的参数字符串”。

而参数中汉字的获取,我们通过一个局部变量获取输入的内容,并通过字符串函数“charAt”截取到第1位字符。

当接口调用结束,我们通过“$axure.setGlobalVariable('pinyin', JSON.stringify(msg['result']));”将返回结果中的拼音写入Axure中的全局变量“pinyin”中进行下一步处理。

相信大家马上想到了新的问题:这段JS代码写在哪里?

我们可以通过【鼠标单击时】【打开链接】,勾选“链接到url或文件”选项,在输入框中添加JS代码。

注意,需要在代码前面加上“javascript: ”,表示打开JS代码。

这时,大家可以进行测试,输入一个文字到文本框,点击按钮,就能够看到工具栏中的变量值会发生改变。

最后,我们可以通过【添加行】的动作将输入的汉字词语以及全局变量中的拼音存入中继器,当然全局变量中的拼音我们只需要第一个字母,通过“[[pinyin.charAt(2)]]”进行获取即可。

还有,要注意的是,接口调用是有网络延时的,需要进行处理。

简单的处理方式是在【添加行】动作之前加一个【等待】一定毫秒的动作。

复杂稳妥一些,是通过循环不停判断是否有返回结果,再进行添加行。

以上两种实现方法,包含在本文提供的源文件中,在此不做详细解释。

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

源文件下载:http://downloads.iaxure.com/words2pinyin.rp


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure中使用JS实现接口调用

喜欢 (11)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. API链接已经404了。
    sketch2018-07-22 11:15 回复
    • 小楼一夜听春语
      链接中的问号不小心弄成全角了,已修正,谢谢!
      小楼一夜听春语2018-07-22 16:42 回复
  2. 厉害了,我的哥
    liangllk2018-07-26 13:45 回复
  3. 为什么我填了其他API想调用一下就会失败呢?
    雷恩2018-08-02 16:33 回复
  4. 有这样需求可以说很变态了
    江老师2018-08-13 22:53 (5天前)回复
  5. 为什么我返回的都是object对象
    2018-08-14 18:05 (5天前)回复