<!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. 基于Struts+Hibernate开发过程中遇到的错误

    1.import  javax.servlet.http.HttpServletRequest 导入包出错 导入包出错,通常是包未引入,HttpServletRequest包是浏览器通过http发出的 ...

  2. CentOS安装并设置MariaDB

    作者: 铁锚 日期: 2013年12月27日 部分参考: Centos 使用YUM安装MariaDB 说明: 首先必须能链接外网. 如果不能直接访问,那也可以设置代理,请参考: 在内网机器上设置yum ...

  3. some phrase for oral english

    依我看,在我看来 I suppose that, ... As far as i'm concerned, ... As i see it, ... It seems to me that ... 1 ...

  4. 循环链表设计与API实现

    基本概念 循环链表的定义:将单链表中最后一个数据元素的next指针指向第一个元素 循环链表拥有单链表的所有操作 创建链表 销毁链表 获取链表长度 清空链表 获取第pos个元素操作 插入元素到位置pos ...

  5. Cocos2D绘制纹理的一般方法

    如果你想在通常情况下绘制纹理,最简单的方法是在CCSprite的子类中实现.否则你将不得不自己创建一个CCRenderState对象传递给blend模式,着色器以及(可选的)纹理给CCRenderer ...

  6. Android 之dragger使用

    1.依赖的注入和配置独立于组件之外,注入的对象在一个独立.不耦合的地方初始化,这样在改变注入对象时,我们只需要修改对象的实现方法,而不用大改代码库. 2.依赖可以注入到一个组件中:我们可以注入这些依赖 ...

  7. java http缓存

    HTTP/1.1中缓存的目的是为了在很多情况下减少发送请求,也即直接返回缓存:同时在许多情况下可以不需要发送完整响应.前者减少了网络回路的数量,挺高响应速度,HTTP利用一个"过期(expi ...

  8. SharePoint 2013 入门教程 [不断更新~]

    以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这个博客也是自己从SharePoint入门,到一个SharePoint开发的成长记录,里面记录的都 ...

  9. linux的link命令

    sudo ln -s 源文件 目标文件 sudo ln -s /usr/local/mysql/bin/mysqladmin /sbin/mysqladmin 建立软连接 ln -d existfil ...

  10. LeetCode(42)-Best Time to Buy and Sell Stock(卖股票)

    题目: Say you have an array for which the ith element is the price of a given stock on day i. If you w ...