首页 > web前端 > js教程 > 正文

通过javascript实现搜索工具栏的实例详解

巴扎黑
发布: 2017-05-22 11:46:09
原创
1474 人浏览过

一:最终效果
通过javascript实现搜索工具栏的实例详解

二:原理

如果你在Yahoo中搜索“中国”,那么在浏览器的地址栏将得到这样一串地址:http://search.cn.yahoo.com/search?ei=gbk&fr=fp-tab-web-ycn&meta=vl%
3Dlang_zh-CN%26vl%3Dlang_zh-TW&pid=ysearch&source=ysearch_www_hp_button
&p=%D6%D0%B9%FA&Submit=
看上去有些乱了,简化一下:http://search.cn.yahoo.com/search?&p=%D6%D0%B9%FA
这就是关键.其中&p=%D6%D0%B9%FA是搜索的关键字参数,而%D6%D0%B9%FA是“中国”的
Url编码。OK,我们只要能构造出这样的编码就好了。

三:URL编码
JavaScript的encodeURIComponent()函数可以完成编码工作。
比如上面的例子我们可以用“http://search.cn.yahoo.com/search?&p=”+encodeURIComponent(“中国”);来完成。

四:代码
(点击加号展开)

代码如下:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %> 
  
  
  
     Search 
  
 



Search



Key Web Mp3 Image


Home
登录后复制

【相关推荐】

1. Javascript免费视频教程

2. JavaScript运动框架之多值运动的具体介绍(四)

3. JavaScript运动框架之多物体任意值运动的示例代码分享(三)

4. JavaScript运动框架之如何解决防抖动问题、悬浮对联(二)

5. JavaScript运动框架之如何解决速度正负取整问题(一)

以上是通过javascript实现搜索工具栏的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!