web前端发ajax请求获取服务器jsonp数据

adeworld

已于 2023-02-07 18:52:32 修改

阅读量259

点赞数

文章标签： windows javascript vscode

于 2023-02-07 18:39:27 首次发布

本文链接：https://blog.csdn.net/qq_51292450/article/details/128918956

版权

第一个案例，获取百度提示词

动态创建script标签请求jsonp跨域

<!DOCTYPE html>
<html lang="zh-cn">
<head >
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Baidu</title>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id="btn">淘宝</button>
 <input type="text" id="tex"/>
 <ol></ol>

<script>
$(function(){
  $("#tex").on("keyup",function(e){
   if(e.keyCode===13){
var tex=document.querySelector("#tex").value;
       baidu(tex)
    $("span").text(e.keyCode);    

   }
    });
    var btn=document.querySelector ("#btn");
    btn.onclick=function(){
    //http://suggestion.baidu.com/su?wd=设计&p=3&cb=tex
var tex=document.querySelector("#tex").value;
//baidu(tex)
taobao(tex)
};
function baidu(tex){
var script =document.createElement("script");
script.src='http://suggestion.baidu.com/su?wd='+tex+'&p=3&cb=haha';
window["haha"] =function(data){
var lis="";
for(var i=0;i<data.s.length;i++){
lis+="<li style='color:blue'>"+data.s[i]+"</li>";
}
var ulTag =document.querySelector("ol");
ulTag.innerHTML=lis;
};
var head=document.querySelector("head");
head.appendChild(script)

}
//http://suggest.taobao.com/sug?area=etao&code=utf-8&callback=KISSY.Suggest.callback&q=设计
function taobao(tex){
var script =document.createElement("script");
script.src='http://suggest.taobao.com/sug?area=etao&code=utf-8&callback=haha&q='+tex+'';
window["haha"] =function(data){
var lis="";
for(var i=0;i<data.result.length;i++){
lis+="<li style='color:red'>"+data.result[i]+"</li>";
}
var ulTag =document.querySelector("ol");
ulTag.innerHTML=lis;
};
var head=document.querySelector("head");
head.appendChild(script)

}

    })    
</script>
</body>
</html>

案例2使用ajax发起jsonp请求获取服务器数据

ajax请求jsonp数据，代码这样写。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>极速手机吉凶</title>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <button id="btn">获取手机吉凶</button>
 <input type="text" id="tex"/>
<p id="p">123</p>
<p id="h"></p>
<script>
$(function(){
      $("#btn").on('click',function(){   
    ajax()
    })      
  $("#tex").on("keyup",function(e){
 if(e.keyCode===13) { 
ajax();
 }
  
})
  function ajax(){
     $.ajax({
    type:"GET",
    dataType:"jsonp",
url:"https://api.jisuapi.com/mobileluck/query",
data:{
mobile:$("#tex").val(),
appkey:'a9*****57',  
//appkey: 已经加密，获取appkey请到官网申请  
          },
success:function(res){
//以下代码创建audio标签，数据请求成功后就可以听到返回结果并渲染到页面
     var au1='<audio autoplay="autoplay">';
var srcs='<source src="http://fanyi.sogou.com/reventondc/synthesis?text='+res.result.characterdetail+'&speed=1&lang=zh-CHS&from=translateweb&speaker=2">';  
var au2='</audio>';
$("#p").html(au1+srcs+au2+res.result.characterdetail)
}
})
 
  }        
function ere(){
    alert("请检查输入，输入不可以空")
}

      })    
</script>
</body>
</html>