如何使用API解析数据

算给自己最近做的项目的总结——API站点

    • 基本整个站点都是使用的第三方API,通过提交数据—接收数据—解析数据—显示到页面中 这么个流程。
    • 说一下我用了哪些数据,知乎头条、网盘搜索、豆瓣电影、一席、各类视频解析数据,以及之后上线的旅游中用到的12306、天气等数据。
    • 其实功能都挺好实现的,我原本的想法是先把功能做好然后在做 UI,后来发现其实最难的是界面的设计,让我这个本来就审美差的人设计页面,简直了,看到别人的界面,在瞅一瞅我的界面,想死的心都有了。
    • 整体用到了AJAX功能,以及最普通的js脚本。

代码部分

    1. AJAX的代码—用AJAX与PHP交互(用喜欢你的豆瓣评分做例子)。

      $(function() { 
      $("#send").click(function() { 
      //当send标签的按钮按下时执行下面的程序 
      var cont = $("input").serialize(); 
      //获取input中输入的内容 
      $.ajax({ 
      url: 'php文件所在位置',
      type: 'post', //提交数据方式,支持POST或者GET 
      dataType: 'json', 
      data: cont, //提交的数据,就是上面var cont获取得内容 
      success: function(data) { 
      $("#aver").html(data.aver); $("#na").html(data.na); 
      } 
      }); 
      }); 
      });

    2. PHP代码

      <?php
      $url ="https://api.douban.com/v2/movie/search?q={$_POST["movie"]}"; 
      //获取movie标签的内容,movie的内容就在cont中提交过来 
       $content = ""; $content = file_get_contents($url); 
       $data = json_decode($content,true); 
       $average = $data['subjects'][0]['rating']['average']; 
      //按照json格式来提取你想要的数据 
      $name = $data['subjects'][0]['title']; 
      $json_arr = array("aver"=>$average,"na"=>$name); 
      $json_obj = json_encode($json_arr); 
      echo $json_obj;
      ?>

    3. 提交数据后返回json数据
    4. 通过php处理后的数据,获取评分和名字
    5. 普通JS脚本取数据,通过<script src=”*.php”></script>,再在*.php中加输出js脚本的代码,这能将php获取得数据,不刷新显示在页面中。

      <?php
      $url ="https://news-at.zhihu.com/api/4/news/latest"; $content = ""; $content = file_get_contents($url); 
      $content = str_replace("\\r\\n",'',$content);
      //有时候标题中有\\r\\n(双斜杠代表一个斜杠),这样输出到页面的时候就会导致出错显示不出来。 
      $data = json_decode($content,true); 
      $title = array(); 
      $id = array();
      for($i = 0;$i < 6;$i++){ 
      $title[$i] = $data['stories'][$i]['title'];
      $id[$i] = $data['stories'][$i]['id'];
      }
      echo "function gonews(){";
      //当按钮中onclick中是gonews()的时候就执行下面的js脚本 
      for($i = 0;$i < 6;$i++){
      echo " document.getElementById('zhihu$i').innerHTML = '$title[$i]';
      document.getElementById('zhihu$i').href = 'http://daily.zhihu.com/story/$id[$i]'; document.getElementById('more').innerHTML = 'more'; document.getElementById('more').href = 'http://daily.zhihu.com/story'; "; 
      } 
      echo "}";
      ?>

    6. 相当于这个js脚本

      function gonews() {"
      for($i = 0;$i < 6;$i++){ 
      document.getElementById('zhihu$i').innerHTML = '$title[$i]';  document.getElementById('zhihu$i').href ='http://daily.zhihu.com/story/$id[$i]'; document.getElementById('more').innerHTML = 'more'; document.getElementById('more').href = 'http://daily.zhihu.com/story';"
      }
      

总结

首先知道了如何使用ajax无刷新交互数据,然后知道POST和GET的区别,POST不会返回缓存的数据而GET可能会返回缓存数据,而且当你直接用POST提交可能看不到结果,但是数据是有的,而GET是可以看到数据。

知道了document.getElementById(“..”).src/href这种用法。

学习了UIKIT和BOOTSTRAP框架的使用方法,UIKIT相对于BOOTSTRAP更为简洁,但是功能也少一些,稳定性也差一些。BOOTSTRAP稳定但是东西多,各有各优势。

现在提供数据的平台越来越少,以至于做这点功能都需要找很久这些数据。

—未完待续

一些HTML插件(持续更新)

天气:

<iframe src=”http://i.tianqi.com/index.php?c=code&amp;id=2&amp;num=1″ name=”weather_inc” width=”50%” height=”70″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”>
</iframe>

注释:num代表显示几天


一言:

 <script type=”text/javascript” src=”https://api.lwl12.com/hitokoto/main/get?encode=js&charset=utf-8″></script><div id=”lwlhitokoto”><script>lwlhitokoto()</script>

注释:一言就是每次刷新都会换一句话,可以用在网页最下面,美观一点。


会动的google:

 <img src=”http://static.oschina.net/uploads/space/2016/0430/073159_5M9X_2652078.gif” width=”60%” />

备注:并不是透明的


网易云音乐:

 <iframe frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ width=330 height=250src=”http://music.163.com/outchain/player?type=0&id=123216450&auto=0&height=230″></iframe>

备注:网易云中的id如何找
比如自己分享的歌单链接分享 周半仙创建的歌单「我喜欢的音乐」: http://music.163.com/playlist/117247135/98764813/?userid=98764813
其中117247135就替换到我上面代码的id后面!
如果是网上的歌单http://music.163.com/#/playlist?id=530599175那就是id后面的数字替换我上面代码id后面的数字!


网易有道翻译:

<div id=”YOUDAO_FANYIER_WRAPPER” style=”margin:0; border:0; padding:0; width:320px; height:240px;”></div>

<script type=”text/javascript” src=”http://fanyi.youdao.com/openapi.do?keyfrom=<keyfrom>&key=<key>&type=fanyier&version=1.2&select=on” charset=”utf-8″></script>

备注:没啥好说的

<hr>

百度搜索框:

<form name=”f1″ onsubmit=”return g(this)” target=”_blank”>
<table bgcolor=”#FFFFFF” style=”font-size:9pt;”>
<tr height=”60″>
<td valign=”top” width=”8%”>
<a href=”https://www.baidu.com/” target=”_blank”>
<img src=”https://www.baidu.com/img/baidu_jgylogo3.gif” border=”0″ alt=”baidu”>
</a>
</td>
<td>
<input type=”text” name=”word” onfocus=”checkHttps” size=”30″ maxlength=”100″>
<input type=”submit” value=”百度搜索”><br>
<input name=”tn” type=”hidden” value=”SE_zzsearchcode_shhzc78w”>
<input name=”cl” type=”hidden” value=”3″>
<input name=”ct” type=”hidden”>
<input name=”si” type=”hidden” value=”www.baidu.com”>
<div class=”mt10″>
<input name=”s” type=”radio”> 互联网<input name=”s” type=”radio” checked> www.baidu.com
</div>
</td>
</tr>
</table>
</form>
<script src=”http://s1.bdstatic.com/r/www/cache/global/js/BaiduHttps_20150714_zhanzhang.js”></script>
<script>
function checkHttps () {
BaiduHttps.useHttps();
};
function g(formname) {
var data = BaiduHttps.useHttps();
var url = ”;
url = data.s == 0 ? “http://www.baidu.com/baidu” : ‘https://www.baidu.com/baidu’ + ‘?ssl_s=1&ssl_c’ + data.ssl_code;
if (formname.s[1].checked) {
formname.ct.value = “2097152”;
}
else {
formname.ct.value = “0”;
}
formname.action = url;
return true;
};
</script>

备注:没啥好说的


网络真的安全吗?大学生是否有安全意识?

其实这个文章博主很早就像弄了,苦于技术问题和时间问题。

好吧回归正传,其实到了信息化时代,一切东西都透明了,就像你在生活中一样,总会留下痕迹,在网络上也是这样,总会留下痕迹。

但是有多少人在意过网络的安全性,可能都听过黑客这个词,但是现实生活中没有遇到,所以并没有在意,但其实这些人可能就在你身边,就像17年315曝光的公告充电桩上后台获取用户信息等等。不都是在告诫着我们网络很不安全,需要我们去谨慎。