1.这个案例是仿照百度搜索，输入关键词，会出现下拉菜单的过程。

效果：

2.具体做法：

（1）利用百度的数据库做script标签的src。

复制之后的地址是这样的

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&json=1&p=3&sid=1449_20495_13549_17947_20417_15394_11949_20592&req=2&sc=eb&csor=0&cb=jQuery110208732901320327073_1469159304078&_=1469159304101

在浏览器新的窗口中打开，就会给你返回这样的

这样就知道了，s代表的就是数据，在后面的编程中，就可以data.s[i]来获取里面的内容了。

（2）可以对上面的地址进行修改，改为自己定义的callback函数，就是里面的cb可以改一下。里面没有用的都可以删掉，用这样的地址可以访问到。

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=d&cb=miaov&_=1469159304099

所以就可以用这样的地址作为src了

3.代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>baidu</title>

    <style>

        #q{

            width: 300px;

            height: 30px;

            border: 1px solid #f90;

            font-size: 16px;

        }

        #ul1{

            border: 1px solid #f90;

            width: 300px;

            padding: 0;

            margin: 0;

            display: none;

        }

        li a{

            display: block;

            line-height: 30px;

            text-decoration: none;

            color: black;

            padding: 5px;

        }

        li a:hover{

             background: #f90; color: white;

        }

    </style>

    <script>

        function miaov(data){

            var oUl=document.getElementById("ul1");

            var html='';

            if (data.s.length) {//s表示数据，这句话意思是如果数据不为空

                oUl.style.display = 'block';

                for(var i=0;i<data.s.length;i++){

                    html+='<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+data.s[i]+'</a></li>';

                }

                //target="_blank"表示打开一个新的窗口，后面的href是为了跳转资源的。

                oUl.innerHTML=html;

            }else{

                oUl.style.display='none';//如果没有这样的data内容就就将下拉列表隐藏

            }

        }

        window.onload=function(){

            var oQ=document.getElementById("q");

            var oUl=document.getElementById("ul1");

            oQ.onkeyup=function(){

                if (this.value!='') {//输入不是空的时候

                    var oScript=document.createElement('script');

                    oScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=miaov' ;//cb就是callback函数

                    document.body.appendChild(oScript);

                }else{

                    oUl.style.display='none';//输入是空的时候，就不显示。

                }

            }

        }

    </script>

</head>

<body>

    <input type="text" id="q">

    <ul id="ul1">

    </ul>

</body>

</html>

JSONP解决跨域完整例子的更多相关文章

  1. AJAX跨域问题解决方法（2）——JSONP解决跨域

    JSONP是什么?JSON全称为JSON with Padding,是JSON的一种补充的使用方式,不是官方协议. 使用JSONP服务器后台要改动吗?JSONP不同于一般的ajax请求返回json对象 ...

  2. JSONP解决跨域问题，什么是JSONP（转）

    原文链接:https://www.cnblogs.com/xinxingyu/p/6075881.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的 ...

  3. 详解Jquery和AngularJs，Servlet中jsonp解决跨域问题(转)

    众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结. Jquery中jsonp的使用 //myUrl = "http://localhost:8090/api ...

  4. jsonp解决跨域问题

    日常开发网页中,时常遇到跨域问题,通常解决办法:后端提供的接口支持jsonp格式,前端采用dataType:jsonp. 一:Jquery封装的AJAX,dataType:jsonp格式的方法: $. ...

  5. CORS,jsonp解决跨域问题

    同源和跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上 ...

  6. 非jsonp解决跨域问题

    1.服务器端解决跨域问题:配置filter在filter中设置请求头import java.io.IOException; import javax.servlet.Filter;import jav ...

  7. jsonp 解决跨域传输

    JSONP是JSON with Padding的略称.它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅 ...

  8. ajax使用jsonp解决跨域问题

    发现这几篇博客写的不错,转载过来看: js跨域及解决方案   http://www.cnblogs.com/oneword/archive/2012/12/03/2799443.html 如何解决aj ...

  9. 深入了解jsonp解决跨域访问

    在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...

随机推荐

  1. php中增删改查以及返回结果（一）

    虽然毕业后找的第一份正式的工作并不那么令人满意,但是在度过最初的迷茫期后,自己还是决定成为一个程序猿. 最近也是利用上班偶尔闲下来的时间,开始看书,撸代码,写一些小程序. 这两个礼拜主要的写的都是有关 ...

  2. 485和OPT

    也许很多人都以为嫁给美国公民最快要绿卡,其实还有一个更快的婚姻绿卡方式:嫁给485男/女.这是什么意思呢? 嫁给美国公民,配偶方最快会在4-5个月内获得条件绿卡,两年后才能获得永久绿卡.在这两年内,如 ...

  3. Saw a tweet from Andrew Liam Trask, sounds like Oxford DeepNLP 2017 class have all videos slides practicals all up. Thanks Andrew for the tip!

    Saw a tweet from Andrew Liam Trask, sounds like Oxford DeepNLP 2017 class have all videos/slides/pra ...

  4. windows server 安装之后需要做的操作

    一.运行windows update安装更新 提示: 若一直停留在“正在检查更新”,请参考https://answers.microsoft.com/zh-hans/windows/forum/win ...

  5. BZOJ 3090: Coci2009 [podjela]

    3090: Coci2009 [podjela] Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 23  Solved: 17[Submit][Statu ...

  6. IOS instancetype的使用好处

    instancetype的类型表示上,跟id一样,可以表示任何对象类型 instancetype只能用在返回值类型上,不能像 id 一样用在参数类型上 instancetype 比 id 多一个好处 ...

  7. 【LOJ6043】「雅礼集训 2017 Day7」蛐蛐国的修墙方案（搜索技巧题）

    点此看题面 大致题意: 给你一个长度为\(n\)的排列\(p\),要求构造一个合法的括号序列,使得如果第\(i\)个位置是左括号,则第\(p_i\)个位置一定是右括号. 暴搜 很容易想出一个暴搜. 即 ...

  8. Centos 5.5 编译安装mysql 5.5.9

    下载mysql wget  http://mysql.mirrors.pair.com/Downloads/MySQL-5.5/mysql-5.5.9.tar.gz 创建mysql用户 [root@x ...

  9. CSS select样式优化

    下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. <div class="sel_wrap"> <label>请选择 ...

  10. 2018.8.25 JVM

    一.JVM内存区域 Java虚拟机在运行时,会把内存空间分为若干个区域,根据<Java虚拟机规范(Java SE 7 版)>的规定,Java虚拟机所管理的内存区域分为如下部分: 方法区 堆 ...