当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > 用javascript打造搜索工具栏

ASP.NET
asp.net css注释的影响
ASP.NET与数据库相关技巧
关于HtmlForm控件
三色交替的下拉列表框
精通ASP.NET中弹出窗口技术
ASP.NET Forums与现有系统整合方案示例
ASP.NET操作IIS中的虚拟目录
DataGrid与SQL Server 2000数据绑定
如何让Web应用程序在Client端实现导出报表功能
如何保证web app中的Send Email线程稳定性
关于用ASP.Net识别远程主机服务器种类
ASP.NET中上传下载文件
提高ASP.NET性能的方法
asp.net StreamReader 创建文件
asp.net如何生成图片验证码(简单)
一个.net 压缩位图至JPEG的代码
简单的SQL Server数据库数据读取与数据操作
获取网站的RSS聚合到自己的网页
.Net程序中整站通用的防SQL注入函数
asp.net生成缩略图及给原始图加水印的函数

ASP.NET 中的 用javascript打造搜索工具栏


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-13   浏览: 75 ::
收藏到网摘: n/a

一:最终效果

二:原理

如果你在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" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Search</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function GetEncodeOfKey()
{
var strKey = window.document.getElementById("Text_Key").value;
return encodeURIComponent(strKey);
}
function GetUrl(site)
{
var encode=GetEncodeOfKey();
//web
if(document.getElementById("RadioButtonList_Kind_0").checked)
{
if(site=="google")
{
return "http://www.google.com/search?q="+encode+"&ei=UTF-8";
}
else
{
return "http://search.yahoo.com/search?p="+encode+"&ei=UTF-8";
}
}
//mp3
else if(document.getElementById("RadioButtonList_Kind_1").checked)
{
if(site=="google")
{
return "http://www.google.com/search?q="+encode+" mp3"+"&ei=UTF-8";
}
else
{
return "http://audio.search.yahoo.com/search/audio?&p="+encode+"&ei=UTF-8";
}
}
//img
else if(document.getElementById("RadioButtonList_Kind_2").checked)
{
if(site=="google")
{
return "http://images.google.com/images?q="+encode+"&ei=UTF-8";
}
else
{
return "http://images.search.yahoo.com/search/images?p="+encode+"&ei=UTF-8";
}
}
else
{
//alert("err");
}

}
function Button_Google_onclick()
{
window.open(GetUrl("google"));
}
function Button_Yahoo_onclick()
{
window.open(GetUrl("yahoo"));
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<strong><span style="font-size: 24pt; color: #336633">Search<br />
</span></strong>
</div>
<hr style="position: relative" />
<br />
<table style="left: 0px; position: relative; top: 0px">
<tr>
<td style="width: 31px; height: 21px">
<span style="font-family: Terminal">Key</span></td>
<td style="width: 253px; height: 21px">
<input id="Text_Key" style="width: 248px; position: relative" type="text" /></td>
<td style="width: 175px; height: 21px">
<asp:RadioButtonList ID="RadioButtonList_Kind" runat="server" RepeatDirection="Horizontal"
Style="position: relative" Font-Names="terminal">
<asp:ListItem Selected="True">Web</asp:ListItem>
<asp:ListItem>Mp3</asp:ListItem>
<asp:ListItem>Image</asp:ListItem>
</asp:RadioButtonList></td>
</tr>
<tr>
<td style="width: 31px">
</td>
<td colspan="2">
<input id="Button_Google" style="width: 80px; position: relative" type="button" value="Google" onclick="return Button_Google_onclick()" />

<input id="Button_Yahoo" style="left: -29px; width: 104px; position: relative" type="button"
value="Yahoo!" onclick="return Button_Yahoo_onclick()" /></td>
</table>
<br />
<hr style="position: relative" />
<asp:HyperLink ID="HyperLink_Home" runat="server" NavigateUrl="~/Default.aspx" Style="position: relative">Home</asp:HyperLink></form>
</body>
</html>