调用爱词霸接口

JQuery发起get请求

爱词霸每日一句

---

虽然博客是纯前端，但是有了接口一样可以放些动态的东西上去。于是有了评论系统。于是有了每日一句。

接口地址：http://open.iciba.com/dsapi/

1. 引入JQuery

<script src="https://fastly.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

刚开始想用下面这种最简单的方法获取数据，结果会报no-referrer-when-downgrade的错误既然是跨域问题，那就需要处理一下了

<script>
$(document).ready(function(){
	$("button").click(function(){
		$.get("http://open.iciba.com/dsapi/",function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});
</script>

$.get() 的第一个参数是我们希望请求的 URL
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态

2. js部分

<script>
    $(document).ready(function() {
        $.ajax({
            type: "get",
            url: "http://open.iciba.com/dsapi/",
            dataType: 'jsonp', //【jsonp进行跨域请求 只支持get】
            success: function(data) { //【成功回调】
                $(".en").html(data.content);
                $(".zh").html(data.note);
                $("#pic1").attr({
                    src: data.picture
                });
                $("#pic2").attr({
                    src: data.picture2
                });
                $("#pic3").attr({
                    src: data.picture2
                });
            },
            error: function(xhr, type) { //【失败回调】
            }
        });
    });
    </script>

3. body部分

<p class="en"></p>
<p class="zh"></p>
<img src="" alt="" id="pic1">
<img src="" alt="" id="pic2">
<img src="" alt="" id="pic3">

利用免费的api，结合Jquery、Json，静态网页也可以做些东西的。