案例:利用jsonp请求百度接口

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="jsonp.js"></script>

    <title>Document</title>

</head>

<body>

    <h1>百度搜索</h1>

    <input type="text" class="myinput" />

    <div class="exchange"></div>

</body>

<script>

// console.log(ajax);

document.querySelector(".myinput").onblur = function(){

    ajax({

        url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",

        dataType:"jsonp",

        data:{

            wd:this.value

        },

        success:function(res){

            let data = res.s;

            let html = "<ul>";

            data.forEach(v=>{

                html += "<li>"+v+"</li>";

            })

            html += "</ul>";

            document.querySelector(".exchange").innerHTML = html;

        }

    })

}

</script>

</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,153评论 0 2
  • 找到fullcalendar.js, 找到代码为 isRTL:false,这句话 输入以下几句 monthName...
    迷你小小白阅读 1,865评论 0 1
  • # Ajax标签(空格分隔): 笔记整理---[TOC]### 从输入网址开始:- 在学习ajax之前,你应该先了...
    V8阅读 344评论 1 0
  • 北京2018年4月1日上午,NBA常规赛勇士客战国王的比赛中,发生了令人痛心不已的一幕。比赛进行到第三节还有41...
    Curry_宇阅读 1,366评论 1 1
  • ajax问题 浏览器同源策略 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对...
    kino2046阅读 143评论 0 0

友情链接更多精彩内容