百度翻译 和 百度搜索的候选项（jsonp法）——搬砖（非原创）

jsonp的主要四步写法：

 1             var os = document.createElement('script'); //第一步，创建“Script”节点
 2             os.src是要调用的接口地址 http://suggestion.baidu.com/su?cb=qwer&wd= 这个是搜索
 3             os.src = 'http://suggestion.baidu.com/su?cb=qwer&wd=' + input.value;  //第二步，设置调用的接口地址
 4  　　　　　　　　document.body.appendChild(os)  //第三步，添加节点
 
5  
6 //设置回调函数 qwer是自己命名的回调函数的名字 必须带有cd 。 wd 代表关键字  
7 // qwer(d) 中的d 代表响应的结果  
8 function qwer(d){ //第四步，设置回调函数
9  console.log(d); 10 vm.arr = d.s; 11 }

使用vue建立百度翻译方法

 1 <div id="app">
 2         <textarea name="翻译"  cols="30" rows="10" v-model='kw'></textarea>
 3         <p>翻译结果：{{st}} </p>
 4     </div>
 5 
 6 
 7     <script>
 8        let vm = new Vue({
 9            el:'#app',
10            data:{
11                 kw:'',
12                 st:'',
13            },
14            watch:{
15                kw(){
16                   let os = document.createElement('script');
17                    os.src = 'https://api.asilu.com/fanyi?callback=qwer&q='+this.kw+'&type=&_1501665233671';
18                    document.body.appendChild(os);
19                }
20            }
21 
22 
23        })
24        function qwer(d){
25            console.log(d);
26            vm.st = d.data;
27        }
28     </script>

原生js  百度搜索

 1 input = document.querySelector('input');
 2         ul = document.querySelector('ul');
 3         console.log(input,ul);
 4 
 5 
 6         input.oninput = ()=>{
 7            var os = document.createElement('script');
 8             os.src = 'http://suggestion.baidu.com/su?cb=qwer&wd=' + input.value;
 9             document.body.appendChild(os)
10         }
11         function qwer(d){
12             console.log(d);
13             let arr = d.s;
14             ul.innerHTML = '';
15             for(let i = 0;i<=arr.length;i++){
16                 var oli = document.createElement('li');
17                 oli.innerHTML = arr[i];
18                 ul.appendChild(oli)
19             }
20         }

Vue写法

 1 <div id="app">
 2         <input type="text" v-model="kw"> <hr>
 3         <ul>
 4             <li v-for='item in arr' :key='item'>{{item}}</li>
 5         </ul>
 6     </div>
 7 
 8 
 9     <script>
10        let vm = new Vue({
11             el:'#app',
12             data:{
13                 kw:"",
14                 arr:[],
15             },
16             watch:{
17                 // 当kw变化了，准备发送请求
18                 kw(){
19                     if (this.kw == '') {
20                         this.arr = [];
21                         return;
22                     }
23                     let os = document.createElement('script');
24                     os.src = 'http://suggestion.baidu.com/su?cb=qwer&wd=' + this.kw;
25                     document.body.appendChild(os);
26                 }
27             }
28         })
29         function qwer(d){
30             console.log(d);
31             vm.arr = d.s;
32         }
33     </script>

仅供娱乐学习

posted @ 2021-06-12 11:38  花月  阅读(133)  评论(0)    收藏  举报