随便写了个jsonp模拟百度搜索相关词汇的小demo，帮助新手理解jsonp的用法。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟百度搜索框</title>
<style>
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul,li{
list-style: none;
}
.baiduSearch{
width: 600px;
margin:100px auto 0;
text-align: center;
}
#search_txt{
width: 500px;
height: 40px;
border:1px solid #ccc;
border-right: 0;
outline: 0;
text-indent: 10px;
font-size: 24px;
}
#search_btn{
display: inline-block;
width: 100px;
height: 40px;
line-height: 40px;
vertical-align: top;
font-size: 20px;
cursor: pointer;
color:#666;
border:1px solid #ccc;
text-decoration: none;
}
.result{
width: 500px;
border:1px solid #ccc;
border-top: 0;
display: none;
}
.result>li{
height: 30px;
line-height: 30px;
text-align: left;
text-indent: 10px;
}
</style>
</head>
<body>
<div class="baiduSearch">
<input type="text" id="search_txt"><a href="javascript:;" id="search_btn">搜索</a>
<ul class="result"></ul>
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$("#search_txt").on("keydown",function(){
$("#search_btn").attr("href","https://www.baidu.com/s?wd="+$("#search_txt").val());
$(".result>li").remove();
if($(".result>li").length==0){
$(".result").hide();
}
$.ajax({
type:"get",
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data:{wd:$(this).val()},
dataType:"jsonp",
jsonp:"cb",
success:function(data){
for(var i = 0;i<data.s.length;i++){
var oLi=$("<li>"+data.s[i]+"</li>");
$(".result").show().append(oLi);
}
}
});
});
</script>
</body>
</html>

演示地址： jsonp搜索

jsonp模拟获取百度搜索相关词汇的更多相关文章

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

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

  2. 【Python学习笔记六】获取百度搜索结果以及百度返回“百度安全验证”问题解决

    1.获取百度搜索结果页面主要是修改百度搜索url中的参数实现,例如查询的关键字为wd: 举例:https://www.baidu.com/s?wd=python",这样就可以查询到‘pyth ...

  3. js 获取百度搜索关键词的代码

    有可能有时候我们会用到在百度搜什么关键词进来我们的网站的,所有我们又想拿到用户搜索的关键词. 这是我研究了半天所得出的办法.话不多说直接贴代码 <script> function quer ...

  4. PHP 批量获取 百度搜索结果 网址列表

    <?php set_time_limit(0); function curl($url){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $u ...

  5. 获取百度搜索结果的真实url以及摘要和时间

    利用requests库和bs4实现,demo如下: #coding:utf- import requests from bs4 import BeautifulSoup import bs4 impo ...

  6. 用 Python 获取百度搜索结果链接

    前言 近期有许多项目需要这个功能,由于Python实现起来比较简单就这么做了,代码贴下来觉得好点个赞吧~ 代码 # coding: utf-8 import os import time import ...

  7. JS——模拟百度搜索

    注意事项: 1.for循环移除子节点时,其长度是变化的 2.在文档流中,input.img.p等标签与其他标签有3px的距离,利用左浮动,可以消除3px距离 3.背景图片定位时,第一个值是x轴方向的值 ...

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

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

  9. 获取百度地图POI数据三（模拟关键词搜索）

    上一篇博文中讲到如何获取用于搜索的关键词,并且已经准备好了一百五十万的关键词   这其中有门牌号码,餐馆酒店名称,公司名称,道路名称等.有了这些数据,我们就可以通过代码,模拟我们在百度地图的搜索框中搜 ...

随机推荐

  1. php无限分类

    无限循环 1.需要套2个foreach 2.2个foreach结构一样 纯代码获取数据 ){ $where['parent_id']= $parent_id; $res = $this->m-& ...

  2. QT中检索设定目录下所有指定文件的方法

    void MainWindow::on_pushButton_clicked() { QDir dir=QFileDialog::getExistingDirectory(this, tr(" ...

  3. QT中使用函数指针

    想仿命令行,所以定义了一个类,让一个String 对应一个 function,将两者输入list容器. 类中定义了 QString commandStr; void (MainWindow::*com ...

  4. fedora23的打印服务

    cups: common unix printing system. 是通用的打印服务. whatever 不管什么; whichever: 不管哪个 可以使用 http://localhost:63 ...

  5. sql中的!=判断的注意事项

    sql查询中where过滤条件为某字段 colName='xx'时一般不会出什么问题, 但如果想达到不为xx的时候就要注意了,用colName!= 'xx'可能就有问题了,因为该字段可能为空,为nul ...

  6. filterHTML

    function filterHTML(source) { return !source ? "" : source.replace(/]*>/g, "" ...

  7. C#模拟鼠标键盘控制其他窗口（一)

    编写程序模拟鼠标和键盘操作可以方便的实现你需要的功能,而不需要对方程序为你开放接口.比如,操作飞信定时发送短信等.我之前开发过飞信耗子,用的是对飞信协议进行抓包,然后分析协议,进而模拟协议的执行,开发 ...

  8. 文本框value联动修改

    <input id="ipt-edit" value="" /><input id="ipt-target" value= ...

  9. DNS解析过程和域名收敛、域名发散、SPDY应用

    前段时间项目要做域名收敛,糊里糊涂的完成了,好多原理不清晰,现在整理搜集下知识点. 域名收敛的目的是什么?简单来说就是域名解析慢.那为什么解析慢?且听下文慢慢道来. 什么是DNS? DNS( Doma ...

  10. Xtrabackup 安装使用

    一 简介:      Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具InnoDB Hotbackup的一个很好的替代品.它能对Inno ...