随便写了个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. Nginx 301重定向设置

    server { server_name www.***.com ***.com; if ($host != 'www.***.com' ) { rewrite ^/(.*)$ http://www. ...

  2. 安全测试及B/S C/S安全性比较

    一.用户认证安全的测试要考虑问题: 1.        明确区分系统中不同用户权限 2.        系统中会不会出现用户冲突 3.        系统会不会因用户的权限的改变造成混乱 4.     ...

  3. [Head First设计模式]身边的设计模式——适配器模式

    系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...

  4. Android网络操作的几种方法

    安卓开发软件:AndroidStudio 服务器软件:Myeclipse+Tomcat 首先无论是哪种方式,安卓手机软件要想联网,必须要申请联网权限(android.permission.INTERN ...

  5. 【bzoj4326】[NOIP2015]运输计划

    题目描述 公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n−1 条双向航道,每条航道建立在两个星球之间,这 n−1 条航道连通了 L 国的所有星球.小 P 掌管一家物流公司, 该 ...

  6. 【荐1】Total Commander 7.57 个人使用设置 及 常用快捷键 备忘

    Total Commander 7.57a  下载地址:http://www.baidu.com/s?wd=total commander 7.57 破解版 软件整体预览图:(注意,下面的版本我用的是 ...

  7. Xshell个性化设置，解决Xshell遇到中文显示乱码的问题

    在同事的推荐下,今天开始使用Xshell连接Linux,但是发现一个“遇到中文显示乱码”的问题, 同事的解决方案如下: 平常给Linux上传文件之前,先把文件转换成UTF-8编码形式, 然后设置Xsh ...

  8. CSS背景background详解，background-position详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  9. 关于requirejs

    24718-12042010 00001h6wzKLpfo3gmjJ8xoTPw5mQvY YA8vwka9tH!vibaUKS4FIDIkUfy!!f 3C"rQCIRbShpSlDcFT ...

  10. linux git安装及配置（包括更新）

    1.在终端运行命令 sudo apt-get install git 2.查看版本号 git --version  (若不是最新可更新 自选) 更新提示: sudo add-apt-repositor ...