<!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. nginx 安装php

    1. 安装PHP 5.5.0 下载   1 2 cd /usr/local/src/ wget http://www.php.net/get/php-5.5.0.tar.bz2/from/jp1.ph ...

  2. Pollution over East China : Image of the Day

    acquired October 16, 2002download large image (2 MB, JPEG, 6000x4600) acquired October 16, 2002downl ...

  3. Xcode中的调试工具栏简介

    如下图所示: 从左至右,第一个按钮用来隐藏调试区域. 第二个按钮向你展示断点是否被全局开启或禁用.如果它不是高亮蓝色,则没有断点会被触发. 第三个按钮暂停或继续程序的执行,你一般点击它继续运行到程序的 ...

  4. CUDA学习，查看device性能参数

    #include "../common/book.h" #include< stdio.h> #include "cuda_runtime.h" # ...

  5. iOS开发：创建真机调试证书步骤(还有一篇是真机测试步骤)(2015年)

    (关于真机测试步骤的blog:http://blog.csdn.net/hbblzjy/article/details/51680282) 1.首先打开苹果的开发者网站(https://develop ...

  6. Mapreduce 框架解析

    MapReduce过程解析 一.客户端 Map-Reduce的过程首先是由客户端提交一个任务开始的. public static RunningJob runJob(JobConf job) thro ...

  7. 【UML 建模】UML建模语言入门 -- 用例视图详解 用例视图建模实战

    . 作者 :万境绝尘  转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/18964835 . 一. 用例视图概述 用例视图表述哪些 ...

  8. 苹果新的编程语言 Swift 语言进阶（九）－－方法和下标

    一.方法 方法是与特定类型相关的函数.与属性一样,方法也包括实例方法和类型方法. 类.结构.枚举都能定义实例方法,用来封装或实现给定类型的一个实例相关的功能或特定任务. 类.结构.枚举也能定义与类型本 ...

  9. hbase 集群管理脚本

    #!/bin/bash # Show all running Java processes on region servers. Must run on master using HBase owne ...

  10. Leetcode_263_Ugly Number

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/49431329 Write a program to che ...