Eins: Endeffekt
Zweit: Prinzip
Wenn Sie in Yahoo nach „China“ suchen, Dann erhalten Sie in der Adressleiste des Browsers eine Zeichenfolge wie diese: 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=
Es sieht etwas verwirrend aus, bitte vereinfachen Sie es: http://search.cn.yahoo.com/search ?&p= %D6%D0%B9%FA
Dies ist der Schlüssel. Wobei &p=%D6%D0%B9%FA der Schlüsselwortparameter der Suche ist und %D6%D0%B9%FA „China“ ist „
URL-Kodierung. OK, solange wir eine solche Codierung erstellen können.
Drei: URL-Kodierung
Die Funktion encodeURIComponent() von JavaScript kann die Kodierungsarbeit abschließen.
Zum Beispiel können wir im obigen Beispiel „http://search.cn.yahoo.com/search?&p="+encodeURIComponent("China");“ verwenden.
Viertens: Code
(Klicken Sie zum Erweitern auf das Pluszeichen)
Der Code lautet wie folgt:
<%@ 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">
<p>
<br />
<br />
<strong><span style="font-size: 24pt; color: #336633">Search<br />
</span></strong>
</p>
<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>[Verwandte Empfehlungen]
1 . Kostenloses Javascript-Video-Tutorial
2. Detaillierte Einführung in die mehrwertige Bewegung des JavaScript-Bewegungsframeworks (4)
4. So lösen Sie das Anti-Shake-Problem und suspendierte Couplets in das JavaScript-Motion-Framework (2)
5.Wie löst das JavaScript-Motion-Framework das Problem der positiven und negativen Geschwindigkeitsrundung (1)
Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Implementierung der Suchsymbolleiste über Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
