<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<style>
*{
margin: 0;
padding: 0;
}
p{
height: 42px;
width: 605px;
margin: 50px auto 0;
}
input{
width: 500px;
height: 40px;
float: left;
border: 1px #000 solid;
}
button{
width: 100px;
height: 42px;
border: none;
background: #3F89EC;
color: #fff;
cursor: pointer;
}
li{
list-style: none;
}
#list{
width: 605px;
margin: 0 auto;
}
</style>
</head>
<body>
<p>
<input type="text" id="txt" />
<button id="btn">百度一下</button>
</p>
<ul id="list">

</ul>
</body>
</html>
<script>
var oTxt = document.getElementById("txt");
var oBtn = document.getElementById("btn");
var oList = document.getElementById("list");

function handel(data){
oList.innerHTML = '';
var data = data.s;
for(var i=0;i<data.length;i++){
var li = document.createElement("li");
li.innerHTML = data[i];
oList.appendChild(li);
}
}

oBtn.onclick = function(){
var script = document.createElement("script");
script.src = "http://suggestion.baidu.com/su?wd="+oTxt.value+"&cb=handel";
document.body.appendChild(script);
script.onload = function(){
this.remove();
}
}
</script>

百度搜索(jsonp)的更多相关文章

  1. jsonp模拟获取百度搜索相关词汇

    随便写了个jsonp模拟百度搜索相关词汇的小demo,帮助新手理解jsonp的用法. <!DOCTYPE html><html lang="en">< ...

  2. jsonp跨越请求百度搜索api 实现下拉列表提示

    题目来源: 最近在做百度IFE前端技术学院的题,然后有一题就是模拟百度搜索智能提示.题目是开源的,稍后给出地址. 因为博主没学过后端啊,欲哭无泪,所以不能实现后端模糊搜索,那如果前端ajax纯粹请求一 ...

  3. 百度搜索效果（jsonp法）

    百度搜索效果(jsonp法): 不需要放在服务器中,本地就可以执行 <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. js借助JSONP实现百度搜索框提示效果

    主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id ...

  5. 跨域解决方案之JSONP，通过借助调用百度搜索的API了解跨域案例

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

  6. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  7. jsonp跨域获取数据实现百度搜索

    本菜鸡最近在写某个页面请求数据时,报了如下的错误. Failed to load https://...:No 'Access-Control-Allow-Origin' header is pres ...

  8. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  9. Vue调用百度接口做百度搜索

    这两天由于学习需要,需要用vue来调用api接口,但是以前没怎么接触过用vue来调用接口,不会没关系,发挥我们强大的学习能力,都不是事,学习了半天基本也就可以初级上手了,写篇随笔记录下来,方便以后回顾 ...

随机推荐

  1. OC利用ijkplayer框架按照步骤集成实现电视直播

    一. 下载ijkplayer ijkplayer下载地址:https://github.com/Bilibili/ijkplayer 下载完成后解压, 解压后文件夹内部目录如下图: ijkplayer ...

  2. 《java入门第一季》之类（Object类）

    package cn.itcast_01; /* * Object:类 Object 是类层次结构的根类.每个类都使用 Object 作为超类. * 每个类都直接或者间接的继承自Object类. * ...

  3. Cocos2d中update与fixedUpdate的区别(三)

    没错!现在的情况是很糟糕.因为玩家不会看到平滑的动作. 不管怎样,我们都对此无能为力.玩家期待在1秒后小球出现在位置(8),所以我们应该把球放在那里. 我们不会讨论如何避免掉帧的情况.对于这个例子我们 ...

  4. UML之时序图

            时序图,英文名曰:Sequence Diagram,也称顺序图和序列图,是一种行为图,她通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作.她可以表示用例的行为顺序,当执行一 ...

  5. Android实训案例（七）——四大组件之一Service初步了解，实现通话录音功能，抽调接口

    Service Service的神奇之处,在于他不需要界面,一切的操作都在后台操作,所以很多全局性(手机助手,语音助手)之类的应用很长需要这个,我们今天也来玩玩 我们新建一个工程--ServiceDe ...

  6. LeetCode之“链表”：Sort List

    题目链接 题目要求: Sort a linked list in O(n log n) time using constant space complexity. 满足O(n log n)时间复杂度的 ...

  7. HADOOP中的CRC数据校验文件

    Hadoop系统为了保证数据的一致性,会对文件生成相应的校验文件(.crc文件),并在读写的时候进行校验,确保数据的准确性.在本地find -name *.crc -print 看 比如我们遇到的这个 ...

  8. iOS开发小技巧总结

    一.NSLog的使用 NSLog在调试的时候,屡试不爽,可是在项目中用的太多,其实是会影响程序性能的,而且程序在非调试模式下也看不到打印,多浪费资源呢?如果程序中使用的太多,发布前删除又是一个麻烦事, ...

  9. 单片机PWM调制技术

    我们可以看看下图,下图就是一个典型的PWM的波形图. T是一个周期,T1就是高电平所占用的时间,T2就是低电平所占用的时间. 如上图所示T1为脉冲宽度(就是导通时间),周期为T,则输出电压的平均值为U ...

  10. "AWT-EventQueue-0" java.lang.UnsatisfiedLinkError: no freetype in java.library.path

    Exception in thread "AWT-EventQueue-0" java.lang.UnsatisfiedLinkError: no freetype in java ...