资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

ajax跨域实现某度搜索提示功能

成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的仓山网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

src="/upload/pic20/1-210FQ55P62X.png" />

总所周知，为了提提高用户体验度，某度搜索引擎在用户通过输入框进行关键词搜索的时候，会根据用户输入的关键词来匹配出常用的关键词出来以供用户选择，比如搜索建站公司这个词的时候，会有这样的效果：

这就是某度搜索提示的功能，看上去是一个小功能，实际上涵盖的东西还是挺多的；其中实现的原理：就是用户通过-输入关键词-这样一个键盘事件来触发ajax请求，通过ajxa发送到某度数据库中，返回出用户常用相匹配的关键词给前台浏览器，呈现出在页面不刷新的情况下；给用户一种比较好的搜索体验度；我们都知道ajxa最大的好处就是可以在不刷新页面的情况下就可以直接获取数据，这种体验是非常友好的，某种程度上给我们省了很多麻烦。那么，上面的这个功能怎么实现呢，下面，建站公司小编就带大家来实现。



首先，我们需要了解ajxa的一个基本使用方法：如图：




使用ajax的时候，需要几个基本的参数：type：服务器请求方式；默认情况下为get；url：需要发送数据请求的网址；dataType：服务器返回的数据格式；data：发送请求需要传递的数据；success()方法：请求成功的处理函数；error()函数：请求失败的处理函数；如果要实现某度搜索提示的功能，因为url没有现成的内容，并且随着时间的变化，这个URL还不一定一直是不变的(仅仅是笔者的猜测)；所以URL是自己通过浏览器分析得到一些线索：

通过搜索不同的关键词，我们可以发现，某度搜索引擎在鼠标按下的瞬间就会触发ajax请求，并且请求的url有些地方是相同的，有些则是不同的，从图中我们可以分析下参数：ie：返回结果数据编码；from：浏览器类型(pc端/手机端);wd：输入的关键词；cb：处理返回结果集的函数名对应的参数名；JQuery.....那一串则是处理返回结果集的函数名；并且这个函数名是有ajxa系统自动生成的；为什么需要这么处理呢？在ajax跨域处理的时候，就会使用js动态创建script标签，通过引入外部js数据处理文件来实现跨域的问题；这样一想，某度官方也是同意外部人员来使用这个接口的吧。其它的参数，因为不明白什么就不一一解释了，但是，通过搜索不同的关键词发现，这些参数基本都是一样的；因为通过上面的分析我们就可以得到这个url了：【https://www.cdcxhl.com/sugrec?ie=utf-8&prod=pc&wd=成都做网站&yy=xxx】；有了url，我们就可以开始实现了，对于跨域问题，大家就自行某度搜索一下吧。下面就直接上代码了；同时，代码中还设计到了腾讯开发的：artTemplae;有兴趣的朋友可以网上了解一下；



HTML部分：

HTML部分比较简单，一个输入框，一个显示结果的div。



css部分：

css也比较简单，让页面看起来比较舒服些。



JS部分：

JS部分包括了事件处理，数据处理，模版定义和内容的渲染；通过键盘keyup事件来获取输入的关键词，然后通过发送ajxa请求来获取数据；再通过template绑定好数据到定义好的模版里，最后渲染数据到显示结果的div里。



效果展示：
本文题目：ajax跨域实现某度搜索提示功能
URL标题：http://cdkjz.cn/article/spdheo.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
阿坝网站建设成都网站设计重庆外贸网站建设广安网站建设LED显示屏成都网站推广定制网站成都网站改版重庆电商网站建设成都艺考培训

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图