<!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. 17_Android中Broadcast详解(有序广播，无序广播)最终广播,Bundle传递参数，传递参数的时候指定权限

     1  Broadcast是Android中的四大组件之一,他的用途很大,比如系统的一些广播:电量低.开机.锁屏等一些操作都会发送一个广播. 2  广播被分为两种不同的类型:"普通广播( ...

  3. Android Widget工作原理详解(一) 最全介绍

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/46853033 ; Widget是安卓的一应用程序组件,学名窗口小部件,它是微型应用 ...

  4. STL - string（典型操作demo）

    1String概念  string是STL的字符串类型,通常用来表示字符串.而在使用string之前,字符串通常是用char*表示的.string与char*都可以用来表示字符串,那么二者有什么区别呢 ...

  5. 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例

     1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...

  6. JFinal开发环境搭建，JFinal开发案例

     JFinal  是基于 Java  语言的极速  WEB  + ORM  开发框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展.Restful.在拥有Java 语言所 ...

  7. LeetCode之“动态规划”：Triangle

    题目链接 题目要求: Given a triangle, find the minimum path sum from top to bottom. Each step you may move to ...

  8. Linux权限与命令间的关系

    极重要!权限与命令间的关系: 我们知道权限对於使用者帐号来说是非常重要的,因为他可以限制使用者能不能读取/创建/删除/修改文件或目录! 在这一章我们介绍了很多文件系统的管理命令,第六章则介绍了很多文件 ...

  9. OpenCV处理视频序列的类

    代码出处,opencv2 cookbook: /*--------------------------------------------------------------------------- ...

  10. bulk-load 装载HDFS数据到HBase

    bulk-load的作用是用mapreduce的方式将hdfs上的文件装载到hbase中,对于海量数据装载入hbase非常有用,参考http://hbase.apache.org/docs/r0.89 ...