<!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. 《java入门第一季》之Math类一个小案例获取任意数值范围内随机数

    Math:用于数学运算的类. import java.util.Scanner; /* * 需求:请设计一个方法,可以实现获取任意范围内的随机数. * * 分析: * A:键盘录入两个数据. * in ...

  2. 如何成为一名优秀的web前端工程师

    我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀.甚至卓越的WEB前端工程师. 何为:前端工程师? 前端工程师 ...

  3. C#之面向对象的特性

                类是一种抽象的数据类型,但是其抽象的程度有可能会不同,而对象就是一个类的实例,例如,将花设计为一个类,天堂鸟和矢车菊就可以各为一个对象,从这里我们可以看出来,天堂鸟和矢车菊 ...

  4. 某集团BI决策系统建设方案分享

    企业核心竞争能力的提升,需要强壮的运营管理能力,需要及时.准确.全面的业务数据分析作为参考与支撑. 某集团是大型时尚集团,内部报表系统用的QlikView,但是管理分配不够灵活,不能满足数据安全的要求 ...

  5. OpenCV 金字塔图像缩放

    // image_pyramid.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <string> #incl ...

  6. Spring--FileSystemXmlApplicationContext

    //从文件系统或者统一定位资源中获得上下文的定义 public class FileSystemXmlApplicationContext extends AbstractXmlApplication ...

  7. Android特效专辑（六）——仿QQ聊天撒花特效，无形装逼，最为致命

    Android特效专辑(六)--仿QQ聊天撒花特效,无形装逼,最为致命 我的关于特效的专辑已经在CSDN上申请了一个专栏--http://blog.csdn.net/column/details/li ...

  8. java--加强之 eclipse开发工具

    转载请申明出处:http://blog.csdn.net/xmxkf/article/details/9943899 1.eclipse及IDE开发工具介绍 1.MyEcliose原本是Eclipse ...

  9. letter combinations of a phone number(回溯)

    Given a digit string, return all possible letter combinations that the number could represent. A map ...

  10. golang基础- ElasticSearch搜索引擎、kibana可视化工具、向ES输出数据

    转载自:https://blog.csdn.net/u013210620/article/details/78647366 安装ElasticSearch ElasticSearch是一个基于Luce ...