jsonp模拟获取百度搜索相关词汇

时间：2023-02-01 15:41:05

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

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学习笔记六】获取百度搜索结果以及百度返回&OpenCurlyDoubleQuote;百度安全验证”问题解决

    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. js通过循环多张图片实现动画效果

    以小鱼摇尾巴和眨眼睛为例 动画思路: 1.将图片资源放在数组里面 2.通过计时器来设定间隔时间 3.通过计数器来取相应的图片 第一步:基本框架,鱼身体 <body> <canvas ...

  2. Spring AOP&lpar;配置文件方式&rpar;

    spring配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...

  3. 表单校验之datatype

    凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式. 如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非 ...

  4. hdu 5055 Bob and math problem

    先把各个数字又大到小排列,如果没有前导零并且为奇数,则直接输出.如果有前导零,则输出-1.此外,如果尾数为偶数,则从后向前找到第一个奇数,并把其后面的数一次向前移动,并把该奇数放到尾部. 值得注意的是 ...

  5. uva 10366 Faucet Flow

    题意: 给出l和r,然后从l坐标到r坐标每隔两个位置有一个档板,给出挡板的高度,然后想(-1, 1)中间加水,问什么时候会溢出. 分析: 两边先找到距离(-1,1)最近的最大值L和R.接着比较两个L和 ...

  6. MySQL在一台db服务器上面如何启动多个实例

    安装过程省略过,源码安装请参考http://write.blog.csdn.net/postlist/1609043/all 整理自己的文档,发现以前做的例子,share下,欢迎大家提出改进意见. 一 ...

  7. &lbrack;Android开发常见问题-11&rsqb; Unable to execute dex&colon; Multiple dex files define 解决方法

    最近在开发一个工程,其中用到了一个开源的库项目Android-ViewPagerIndicator. 这个项目是作为一个库出现的,如下图: 这个项目中包含了android-support-v4.jar ...

  8. Async分析

     1:android在新版本中不允许UI线程访问网络,但是如果需要访问网络又改怎么办呐?这里有很多解决方案,比如新开一个线程,在新线程中进行访问,然后访问数据,返回后可能会更新界面也可能不更新界面,这 ...

  9. &lbrack;Linux&rsqb;安装pyenv

    python多版本管理pyenv 网址:https://blog.csdn.net/yingfeng_yang/article/details/82527321 Ubuntu16.04安装pyenv1 ...

  10. ionic UI Component Slides使用&colon;手动滑动后自动滑动失效解决

    在使用ionic的UI组件Slides时,发现手动滑动后,自动滑动失效 然后历经一点点的艰辛查找后找到方法,如下: 页面代码使用 <ion-slides pager loop="tru ...

相关文章