ajax跨域请求失败是怎么回事?

小老弟想模仿一个简易的百度搜索智能提示的效果,不料跨域请求一直不成功,还请各位老哥指点一二!
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    ul{list-style-type: none;border: 1px solid #333;width: 252px;border-top: none;display: none;}
    .box{margin: 100px auto;text-align: center;width: 250px;position: relative;}
    input{outline: none;height: 30px;width: 250px;}
    ul li{text-align: left;padding: 4px;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>

<div class="box">
    <form action="" id="">
        <input type="text" name="" value="">
    </form>
    <ul>
        <li>dfsfkj</li>
        <li>dfsfkj</li>
    </ul>
</div>
<script type="text/javascript">
    $("ul").on("mouseover","li",function(){
        $("ul li").css({background: "none"});
        $(this).css({
            background: "#ddd"
        });
    }).on("click","li",function(){
        var value = $(this).html();
        $("input").val(value);
        $("ul").hide();
    });
    $("input").on("keyup",function(){
        $.ajax({
            type: "GET",
            url: "",
            data: {},
            dataType: "jsonp",
            jsonp: "callback",
            success: function(data){
                console.log(data);
            },
            error: function(){
                alert("通信错误");
            }
        });
        if($(this).val() === ""){
            $("ul").hide();
        } else{
            $("ul").show();
        }
    })
</script>

</body>
</html>

运行后有两个问题,第一我找不到百度搜索的api,即我不知道url改写什么。。。
第二我每次触发ajax请求的话都会有这样的报错
clipboard.png
还请各位老哥不吝赐教,不胜感激!

现在我把js改成这样:
$("input").on("keyup",function(){

        var value = $(this).val();
        $.ajax({
            type: "GET",
            // url: "https://www.baidu.com/s?wd=" + value + "&rsv_spt=1&rsv_iqid=0xdb616ebd0001ac06&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduerr&rsv_enter=1&rsv_sug3=4&rsv_sug1=3&rsv_sug7=100&rsv_sug2=0&inputT=602&rsv_sug4=1700",
            // data: {}
            url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + value,
            dataType: "jsonp",
            // jsonp: "callback",
            success: function(data){
                alert("done");
            },
            error: function(){
                alert("通信错误");
            }
        });
        if($(this).val() === ""){
            $("ul").hide();
        } else{
            $("ul").show();
        }
    });

还是会报错
clipboard.png
但是当我在输入狂输入d,在preview里面已经可以看到数据了!
现在就是怎么解决这个报错呢?

阅读 4.8k
6 个回答

自己又找了点资料,总算是解决了:

clipboard.png

请求的url是我从别人的代码里摘下来的,应该要去百度申请才行好像,然后就是jsonp的值百度默认好像是cp

clipboard.png
clipboard.png

百度搜索的时候的地址是不是没必要写那么长的一段呀,
URL:https://www.baidu.com/his?wd=...;
wd后面才是你需要传过去的参数,cb就是回调函数呀,这个可以自定义的,然后在回调函数中返回结果的;
这段地址里面from参数不变就行了
郁闷,我写的地址还无法全部解析,愁人
&wd=‘你需要搜的文字’&from=pc_web(这个随便,可不加)&cb=xxx(回调函数名称),只能帮你到这里了
对了,你也可以通过查看页面元素,直接看到地址的

楼主要清楚,并不是把不支持跨域的json加个jsonp就能跨域了,这是要服务器支持的。

这个应该跟跨域限制应该没什么关系, 只是请求的数据不是 合法的 js 表达式 导致 解析出错 请看 具体返回的数据 查找问题

新手上路,请多包涵

错误信息是语法错误,好好检查你的代码

推荐问题
宣传栏