Several ways to get pictures from the network

Obtain the image download from the network through the API. Here, take Tianxing data as an example to do a brief experiment.

Data acquisition address: website address (please obtain the key in the personal center, registration is required, then copy it in the personal center, and replace the APIKEY)

1. Python method

import requests
import json


def main():
    # request / response
    resp = requests.get('http://api.tianapi.com/meinv/?key=自己的KEY&num=10')
    mydict = json.loads(resp.text)
    for tempdict in mydict['newslist']: 
    # 这里的newslist要根据不同api中的名字做相应调整,此次天行的为newslist.
        pic_url = tempdict['picUrl']
        resp = requests.get(pic_url)
        filename = pic_url[pic_url.rfind('/') + 1:]
        try:
            with open(filename, 'wb') as fs:
                fs.write(resp.content)
        except IOError as e:
            print(e)


if __name__ == '__main__':
    main()

  • 2. JavaScript (html) original method
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <!--div---加载的美女图片存放的地方-->
        <div id="photos">

        </div> 
        <button id="load">加载</button> <!--加载数据按钮-->
        <!--用原生JS写   先给按钮绑定事件-->
        <script type="text/javascript">
            //即时调用函数(function(){}()) 或者+(function(){})
            (function(){
                //通过ID拿,然后绑定事件,这里不考虑浏览器兼容性问题
                var btn = document.getElementById('load'); 
                btn.addEventListener('click', function(){
                    //异步请求对象,偷偷的给服务器发送请求对象,这里暂时也不考虑浏览器兼容性问题
                    var xhr = new XMLHttpRequest();
                    //JS默认只能从自己的服务器取数据, 同源策略
                    //但是今天的绝大多数都提供数据接口的服务器都设置了运行跨域取数据
                    //浏览器中支持2种协议 方式 get--拿数据,资源; post---提交  http协议
                    //url-统一资源定位符,就是一个地址 uniform resouce locator
                    //第一个参数get/第二个参数url/第三个参数true--表示异步请求
                    xhr.open('get', 
                        'http://api.tianapi.com/meinv/?key=自己的KEY&num=10', true);
                    //事件回调 onreadystatechange-就绪状态改变
                    xhr.onreadystatechange = function(){
                        //判断服务器响应是否完成,如果readyState==4,表示成功;服务器响应完成 正在传为2, 刚刚连上,还未传数据为1
                        //status表示状态,为200时,表示连接成功 服务器正常
                        if (xhr.readyState == 4){
                            //通过从服务器获取的数据,对页面进行DOM操作实现局部刷新
                            if (xhr.status == 200){
                                //字符串解析
                                var obj = JSON.parse(xhr.responseText);
                                var mmArray = obj.newslist;
                                var div = document.getElementById('photos')
                                for (var i = 0; i < mmArray.length; i += 1){
                                    var picUrl = mmArray[i].picUrl;
                                    var img = document.createElement('img');
                                    img.src = picUrl;
                                    img.width = '360';
                                    div.appendChild(img);
                                }
                            }
                        }
                    }
                    //发出请求
                    xhr.send()      
                })
            }());
        </script>
    </body>
</html>

  • 3. .get.JSON method
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="photos"></div>
        <button id="load">加载</button>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var url = 'http://api.tianapi.com/meinv/?key=自己的KEY&num=10'
                $('#load').on('click', function(){
                    $.getJSON(url, function(obj){
                        var mmArray = obj.newslist;
                        for (var i = 0; i < mmArray.length; i += 1){
                            var img = $('<img>').attr('src', mmArray[i].picUrl).width(300);
                            $('#load').append(img);
                        }
                    })
                })
            })
        </script>
    </body>
</html>

  • 4. .ajax method
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="photos"></div>
        <button id="load">加载</button>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var urlStr = 'http://api.tianapi.com/meinv/?key=自己的KEY&num=10'
                $('#load').on('click', function(){
                    $.ajax({
                        url: urlStr,
                        type:'get',
                        dateType:'json',
                        success:function(obj){
                            var mmArray = obj.newslist;
                            for (var i = 0; i < mmArray.length; i += 1){
                                var img = $('<img>').attr('src', mmArray[i].picUrl).width(300);
                                $('#load').append(img);
                            }
                        }   
                    })
                })
            })
        </script>
    </body>
</html>

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325777781&siteId=291194637