随便写了个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. postgresql:pgadmin函数调试工具安装过程

    通过安装第三方插件pldebugger,可实现在pgadmin客户端对函数设置断点.调试,具体过程如下: 1.下载pldebugger安装包:http://git.postgresql.org/git ...

  2. passive 的事件监听器

    很久以前,addEventListener() 的参数约定是这样的: addEventListener(type, listener, useCapture) 后来,最后一个参数,也就是控制监听器是在 ...

  3. thinkphp一对多HAS_MANY

    关联关系通常我们所说的关联关系包括下面三种:一对一关联 :ONE_TO_ONE,包括HAS_ONE 和 BELONGS_TO 一对多关联 :ONE_TO_MANY,包括HAS_MANY 和 BELON ...

  4. BZOJ 4724: [POI2017]Podzielno

    Description 由\([0,B-1]\)的数字构造一个 \(B\) 进制数字,使得他是 \(B-1\) 的倍数. Sol 贪心+二分. 首先 \(X\) 是 \(B-1\) 的倍数,那么有 \ ...

  5. nginx+ISS 负载均衡 快速入门

    第一:下载 http://pan.baidu.com/s/1dDwapbF 或者官网 http://nginx.org/en/download.html 启动服务: 直接运行nginx.exe,缺点控 ...

  6. [Linux]系统调用理解(2)

    本文介绍了Linux下的进程概念,并着重讲解了与Linux进程管理相关的4个重要系统调用getpid,fork,exit和_exit,辅助一些例程说明了它们的特点和使用方法. 关于进程的一些必要知识 ...

  7. 个人Win10 +archlinux安装笔记

    win10+archlinux 1.查看磁盘并分区并挂载1.1 分区/dev/sda1 WIN10 保留分区/dev/sda2 WIN10 ESP分区(EFI)/dev/sda3 WIN10 MSR分 ...

  8. 【转】Caffe初试（四）数据层及参数

    要运行caffe,需要先创建一个模型(model),如比较常用的Lenet,Alex等,而一个模型由多个层(layer)构成,每一层又由许多参数组成.所有的参数都定义在caffe.proto这个文件中 ...

  9. “ifstream” 未声明的标识符

    #include <fstream> 还要加入: using  namespace std;

  10. poj 2955 Brackets

    题目链接:http://poj.org/problem?id=2955 思路:括号匹配问题,求出所给序列中最长的可以匹配的长度(中间可以存在不匹配的)例如[(])]有[()]符合条件,长度为4 dp[ ...