jsonp

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>jsonp跨域</title>
 6         <style>                 
 7             .center{
 8                  60%;
 9                 height:40vh;
10                 margin: auto;
11             }
12             img{    
13             display: block; 
14             400px;
15             height: 200px;
16             margin-left: 16%;
17             }
18             .input{
19                 margin: auto;
20                  inherit;
21                 height: auto;
22             }
23             .search{
24                 margin-left: 11.8%;
25                 position: absolute;
26                 border: 1px solid #eee;
27                  349px;
28                 height: auto;
29                 display: none;
30             }
31             ul{
32                 padding-left: 0;
33                 list-style: none;
34             }
35             #text{
36                 height: 25px;
37                  270px;
38             }
39             a{
40                 text-decoration: none;
41                 color: #000;
42             }
43             button{
44                 position: relative;
45                 display: inline-block;
46                 height: 31px;
47                 line-height:25px;
48             }
49         </style>
50     </head>
51     <body>
52         <div class="center">
53             <img src="img/1.png" />
54             <div class="input">
55                 <input type="text" id="text" />
56                 <button id="btn">搜索一下</button>
57             </div>
58             <div class="search">
59                 <ul></ul>
60             </div>
61         </div>         
62     </body>
63     <script>
64         var otext=document.getElementById("text");
65         var osea=document.getElementsByClassName("search")[0];
66         var oul=document.getElementsByTagName("ul")[0];
67         otext.onkeyup=function(){
68             var val=otext.value;
69             osea.style.display=val?"block":"none";
70             var os=document.createElement("script");
71             os.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=laji&_=1502957262912";
72             document.body.appendChild(os);
73         }
74          function laji(json){
75              oul.innerHTML='';
76              json.s.forEach(function(data){
77                  var oli=document.createElement("li");
78                  oli.innerHTML="<a href='https://sp0.baidu.com/s?wd="+data+"'>"+data+"</a>";
79                  oul.appendChild(oli);
80              });
81          }
82     </script>
83     <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E5%9E%83%E5%9C%BE&cb=laji&_=1502957262912"></script>
84 </html>

jquery版本：

<!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">
    <title>Document</title>
    <style>
    
    </style>
</head>
<body>
    <div class="aa"></div>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        function getInfo(data){
            console.log(data)
        }
        $.ajax({
            type: "get",
            dataType: "jsonp",
            jsonpCallback: "getInfo",
            url: "https://api.github.com/users/gaoxuerong",
            success: function(data){
                console.log('success')
            },
            error: function(error){
                console.log(error)
            }
        })
    </script>
</body>
</html>

相关阅读:
漂亮的表格样式；jQuery清楚表格所有行；js解析后台传过来的JSON数据；动态生成表格数据
 js下载文件；下载方式<a> 和href方式；已经中文乱码问题
 oracle数据库优化与LNNVL函数使用
 HTML页面中使用JQuery获取表格的所有单元的的数据
 oracle中 SQL语句查询后；拼接列；拼接行
 页面制作验证码
 jqGrid,样式
 html 页面弹窗
 Java float保留两位小数或多位小数
 VB操作EXCEL文件大全
原文地址：https://www.cnblogs.com/gaoxuerong123/p/9612487.html