jsonp

Posted 2021-01-05 gaoxuerong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsonp相关的知识，希望对你有一定的参考价值。

 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>

以上是关于jsonp的主要内容，如果未能解决你的问题，请参考以下文章