为了账号安全,请及时绑定邮箱和手机立即绑定

为什么已经用了jsonp了,还是存在跨域问题?!!求大神指教啊!!1

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>必应练习</title>

<script type="text/javascript" src="G:\sublime\jquery\jquery-2.1.1.min.js"></script>

<style type="text/css">

*{margin:0;padding:0;}

body{background-color: #333;}

#main{background-image: url(river.jpg);width:1228px;height:690px;margin: 0 auto;position: relative;}

#search{position:absolute;top:150px;left: 200px; }

.img{float: left;margin-right:18px;margin-top: -4px;}

.form{float: left;background-color: #fff;padding: 5px;}

.search-text{height:25px;line-height: 25px;width: 350px;border:0;outline: none;float: left;}

/*outline:none外框点击时高亮取消*/

.search-submit{border: 0;background-image: url(search-button.png);width:29px;height:29px;float: left;}

/*注意!!要想容器里在同一行高低不一致的两者同样高低,可以用float:left*/


#tip{

background-color:#fff;

width:389px;

position: absolute;

top:189px;

left:325px;

visibility: hidden;

}

#tip ul{

list-style: none;

}

#tip ul li a{

display: block;

padding:5px;

font-size: 15px;

color: #777;

text-decoration: none;

}

#tip ul li:hover{

background-color:#CCC;

text-decoration: underline;

}

/* 如果想用focus,则必须是在该容器下的 */

</style>

</head>

<body>

<div id="main">

<div id="search">

<img src="logo.png" class="img">

<form class="form">

<input type="text" class="search-text">

<input type="submit" class="search-submit" value="">

<!-- input中是无法插入img的 -->

</form>

</div>

<div id="tip">

<ul id="search-list">

<li><a href="#">搜索内容</a></li>

<li><a href="#">搜索内容</a></li>

<li><a href="#">搜索内容</a></li>

</ul>

</div>

</div>


<script type="text/javascript">

$(function(){

$(".search-text").bind({'focus':function(){

$('#tip').css({'visibility': 'visible'});

var searchresult=$(this).val();

$.ajax({

type: "GET",

url: "http://api.bing.com/qsonhs.aspx?q=" + searchresult,

dataType: "jsonp",

jsonp: "callback",

success: function(data) {

var data=data.AS.Results[0].Suggests;

if (data.success) {

$.each(data,function(index){

$("#search-list").append('<li><a href="#">'+data.eq(index)+'</a></li>')

});

} else {

$("#searchResult").html("出现错误:" + data.msg);

}  

},

error: function(jqXHR){     

  alert("发生错误:" + jqXHR.status);  

}   

});

/*$.get('http://api.bing.com/qsonhs.aspx?q='+searchresult,function(data){

var data=data.AS.Results[0].Suggests;//取到的是一个数组

$.each(data,function(index){

$("#search-list").append('<li><a href="#">'+data.eq(index)+'</a></li>')

});

},'json');//data为服务器返回的值

*/

},'blur':function(){

$('#tip').css({'visibility': 'hidden'});}

});

});

</script>

</body>

</html>


正在回答

2 回答

url : 'http://api.bing.com/qsonhs.aspx?type=cb&q='+searchText,
dataType :' jsonp',
jsonp : 'cb',

0 回复 有任何疑惑可以回复我~
#1

DOMOHAHA 提问者

非常感谢!
2016-08-18 回复 有任何疑惑可以回复我~
#2

魏桐

为什么jsonp:'cb', 我将cb改为cd为什么会出现错误? 求指教
2017-04-13 回复 有任何疑惑可以回复我~

 JSONP是一个非常强大的构建mashp的方法,可是不是一个解决跨域访问问题的万能药。它也有一些缺点
    第一也是最重要的:JSONP不提供错误处理。如果动态插入的代码正常运行,你可以得到返回,但是如果失败了,那么什么都不会发生。你无法获得一个404的错误,也不能取消这个请求
    另外一个重要的缺点是如果使用了不信任的服务会造成很大的安全隐患。    

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
搜索框制作
  • 参与学习       66040    人
  • 解答问题       431    个

本课程从简入深讲解搜索框的制作,学习JQ与JS实现Ajax技术的不同点

进入课程

为什么已经用了jsonp了,还是存在跨域问题?!!求大神指教啊!!1

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信