jsonp

发布时间：2020-12-16 18:43:43 所属栏目：百科来源：网络整理

导读：1 !DOCTYPE html 2 html 3 head 4 meta charset="UTF-8" 5 titlejsonp跨域/title 6 style 7 .center{ 8 width: 60% ; 9 height:40vh; 10 margin: auto; 11 } 12 img{ 13 display: block; 14 width:400px; 15 height: 200px; 16 margin-left: 16% ; 17 } 18 .

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>jsonp跨域</title>
 6         <style>                 
 7             .center{
 8                 width: 60%;
 9                 height:40vh;
10                 margin: auto;
11             }
12             img{    
13             display: block; 
14             width:400px;
15             height: 200px;
16             margin-left: 16%;
17             }
18             .input{
19                 margin: auto;
20                 width: inherit;
21                 height: auto;
22             }
23             .search{
24                 margin-left: 11.8%;
25                 position: absolute;
26                 border: 1px solid #eee;
27                 width: 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                 width: 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!