AJAX jsonp解決跨域模板

    <div style="margin-top:20px;">
    	<button id="bt1" type="button">通過AJAX獲取隨機圖片</button> &nbsp;&nbsp;&nbsp;<span id="s1"></span>
    </div>

    <br />

    <img id="img1"/>

    <!-- jquery -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            $("#bt1").click(function () {

                getimg();

            });
 
        });

        //===== AJAX獲圖片 ======
        function getimg() {
            var j = Math.ceil(Math.random() * 100);
            $("#s1").text("正在獲取,請稍等....");
              $.ajax({
				  type:'get',
				  url:'https://pixabay.com/api/?key=16322793-d4bcfe56af2f14816d6549dee&per_page=100',
                  dataType: "jsonp",     //jsonp解決跨域
                  success: function (res) {
                      $("#s1").text("獲取成功,正在加載....");
                      console.log(res.hits[j].largeImageURL);
                      $("#img1").attr('src',res.hits[j].largeImageURL);
				   },
				   error:function(msg){
					  console.log(msg);
				    }
			   });

         }

    </script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章