What do you do in this article:
Through JavaScript to get user action to change the URL parameters to achieve some functions, such as query (the specific query by the server-side code to get the URL in the parameters of the query statement implementation).
two. Preparatory work:
A jquery class library (the version I use is: 1.3.2), a tool class library (Tool.js, basically all online search code), a query class library (Search.js, wrote), an HTM page (used to do exercises), these JS code added to the page HTM page.
HTM page
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<style type= "Text/css" >
. Initcss{color: #666666}
</style>
<script type= "Text/javascript" src= "Js/jquery.js" ></script>
<script type= "Text/javascript" src= "Js/tool.js" ></script>
<script type= "Text/javascript" src= "Js/search.js" ></script>
<script type= "Text/javascript" >
$ (function () {
var search = new Search (' initcss ');
Search._urlhtmlidary[' other '] = ' #dropOther ';
Search._urlparmary[' other '] = "other";
search._urlhtmlidary[' othertxt ' = ' #txtOther ';
search._urlparmary[' othertxt '] = ' othertxt ';
Search. Initbind ();
Search. Searchapply (' #searchBut ', ' search.htm ');
});
function Other () {
$ (' #txtOther '). CSS (' Color ', ' red ');
}
</script>
<body>
<div> time: <input id= "txtdate" type= "text"/></div>
<div> start time: <input id= "Txtdatebegin" type= "text"/></div>
<div> End time: <input id= "Txtdateend" type= "text"/></div>
<div> Enquiry 1:
<select id= "Dropway" >
<option value= "" > All </option>
<option value= "1" > Part One </option>
<option value= "2" > Part II </option>
</select>
</div>
<div> Enquiry 2:
<select id= "Dropother" >
<option value= "" >Other</option>
<option value= "1" >Other1</option>
<option value= "2" >Other2</option>
</select>
</div>
<div> query: <input id= "Txtquery" type= "text"/></div>
<div> query Other: <input type= "text" id= "Txtother"/></div>
<div> query only its own data: <input type= "checkbox" id= "Cbshowme"/></div>
<div><input type= "button" id= "searchbut" value= "Query"/></div>
</body>
Three. Search.js Introduction
A. Need the support of jquery and tool 2 JS scripts.
B. The ID and URL parameters that need to be manipulated are already default, and they are stored in _urlhtmlidary and _urlparmary, and of course these two can all be combined, if you want to add a new ID, start with a # and add the corresponding URL parameter name.
C. Text ID best contains TXT (query box needs special care, need to contain query); The time ID contains date (the start time in the text contains the beginning, end time contains the ending); the multi-marquee ID contains CB; The dropdown box ID contains drop. These are all for JavaScript to manage centrally.
D. When you create a search object, you pass in a CSS parameter, which is primarily implemented, such as a drop-down box that is not selected, the dropdown box font color, and so on.
E. Time query box when content is not filled in, the default is "XXXX-XX-XX"; Query box (query), default to "keywords ...". They all add the effect of the incoming CSS, and the CSS effect is removed when the content is changed.
Four. Call Search.js
A. First, run the HTM page. Get the following figure:
B. Convert the Var search in the JS code in the previous HTM page = new search (' initcss ') to var search = new search (); Refresh the page, we will find "keywords ...", "xxxx-xx-xx" in the page, and the font color changes in the dropdown box, as shown in the figure:
This is the effect of this parameter. Restores the code.
C. Operate the page at will, then press the Query button or enter directly: http://localhost:1406/search.htm?way=1&query=%u4F60%u597D&date=2010-4-20&me= T&bdate=2019-1-1&edate=2019-1-2&other=1&othertxt=helloworld, get similar to the following figure:
The JS code has bound the URL parameter contents to the page.
D. Now remove
Search._urlhtmlidary[' other '] = ' #dropOther ';
Search._urlparmary[' other '] = "other";
search._urlhtmlidary[' othertxt ' = ' #txtOther ';
search._urlparmary[' othertxt '] = ' othertxt ';
Refreshing the page, you will find no Query 2 and query the other bound query content, because at the moment _urlhtmlidary and _urlparmary do not have the corresponding value, does not manipulate the corresponding data. As pictured,
Restore the code.
E. The Search.initbind (other) will now be changed to search. Initbind () will find that the other font color is black instead of the previous red, as shown in the
This is because a method parameter is not added to the Initbind () method, which allows an extension of the action content without changing the Initbind () method. Restores the code.
F.searchapply method The first parameter is ' # ' plus an ID of the action button (the search class adds a carriage return event for the button), and the second parameter is the URL address of the page orientation.
Five Code
Tools.js
Copy Code code as follows:
Tool class
function Tool () {
The substitution of strings is formatted (' A{0}c{1} ', ' B ', ' d ') => ABCD
This. FORMATSTR = function (str, ary) {
For (var A in ary) {
str = str.replace (' {' + A + '} ', Ary[a]);
}
return str;
}
The string is not empty
This. Isnonullorempty = function (str) {
if (typeof (str) = = "undefined" | | | str = NULL | | | str = ' | | | str = ' undefined ') {
return false;
}
else {
return true;
}
}
Get URL parameters
This. Geturlparms = function () {
var args = new Object ();
var query = location.search.substring (1);
var pairs = Query.split ("&");
for (var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexof (' = ');
if (pos = = 1) continue;
var argname = pairs[i].substring (0, POS);
var value = pairs[i].substring (pos + 1);
Args[argname] = unescape (value);
}
return args;
}
Find the position in the string that requires a character, Iscase = True indicates that the case is ignored
This. FINDSTR = function (str, FINDSTR, iscase) {
if (typeof (findStr) = = ' number ') {
Return Str.indexof (FINDSTR);
}
else {
var re = new RegExp (FINDSTR, iscase?) ' I ': ');
var r = Str.match (re);
return r = null? -1:r.index;
}
}
Find string to find out if the corresponding character Iscase = True indicates that case is ignored
This. ISFINDSTR = function (str, FINDSTR, iscase) {
return this. FindStr (str, FINDSTR, iscase) > 0? True:false;
}
Validation Short Date 2010-2-2
This. Isshorttime = function (str) {
var r = Str.match (/^ (\d{1,4}) (-|\/) (\d{1,2}) \2 (\d{1,2}) $/);
if (r = = null) return false;
var d = new Date (r[1], r[3]-1, r[4]);
Return (d.getfullyear () = = R[1] && (D.getmonth () + 1) = = R[3] && d.getdate () = = r[4]);
}
}
Search.js
Copy Code code as follows:
function Search (INITCSS) {
This._tool = new Tool ();
This._urlparmary = {way: ' Way ', query: ' Query ', Date: ' Date ', Me: ' Me ', bdate: "Bdate", Edate: "Edate"};
This._urlhtmlidary = {way: ' #dropWay ', query: ' #txtQuery ', Date: ' #txtDate ', Me: ' #cbShowMe ', bdate: ' #txtDateBegin ', EDA TE: "#txtDateEnd"};
This._dateinitstr = ' xxxx-xx-xx ';
this._queryinitstr = ' keywords ... ';
This._args = This._tool.geturlparms ();
This. Initbind = function (fnother) {
for (var arg in This._args) {
$ (This._urlhtmlidary[arg]). attr (' checked ', true);
$ (This._urlhtmlidary[arg]). Val (unescape (This._args[arg));
}
This. Initcssinfo (Fnother);
}
This. searchapply = function (Searchid, gotourl) {
var searchobj = this;
$ (Searchid). Click (function () {
Window.location.href = Gotourl + searchobj.geturlparms ();
});
$ (document). KeyDown (function (event) {
if (Event.which = = 13) {
$ (Searchid). focus (). Click ();
}
});
}
This. Geturlparms = function () {
var parms = '? ';
var Isfirst = true;
for (var parm in this._urlparmary) {
Htmlid = This._urlhtmlidary[parm];
Htmlval = Escape ($ (htmlid). Val ());
Time TXT processing
if (This._tool.isfindstr (htmlid, ' Date ', true)) {//| | this._tool.isfindstr (htmlid, ' Begin ', true) | | this._ Tool.isfindstr (Htmlid, ' end ', true)) {
if (This._tool.isnonullorempty (htmlval) && htmlval!= this._dateinitstr && this._tool.isshorttime ( Htmlval)) {
if (Isfirst!= true) parms + = "&";
Parms + = parm + ' = ' + htmlval; Isfirst = false;
}
}
Working with Keywords
else if (this._tool.isfindstr (htmlid, ' query ', true)) {
if (This._tool.isnonullorempty (htmlval) && unescape (htmlval)!= this._queryinitstr) {
if (Isfirst!= true) parms + = "&";
Parms + = parm + ' = ' + htmlval; Isfirst = false;
}
}
Working with Drop-down boxes
else if (this._tool.isfindstr (htmlid, ' drop ', true)) {
if (This._tool.isnonullorempty (Htmlval)) {
if (Isfirst!= true) parms + = "&";
Parms + = parm + ' = ' + htmlval; Isfirst = false;
}
}
Process checkbox
else if (this._tool.isfindstr (Htmlid, ' CB ', true)) {
if ($ (htmlid). attr (' checked ')) {
if (Isfirst!= true) parms + = "&";
Parms + + parm + ' =t '; Isfirst = false;
}
}
If the critical query is placed before other text queries
else if (this._tool.isfindstr (htmlid, ' txt ', true)) {
if (This._tool.isnonullorempty (Htmlval)) {
if (Isfirst!= true) parms + = "&";
Parms + = parm + ' = ' + htmlval; Isfirst = false;
}
}
}
if (parms = = '? ') parms = ';
return parms
}
This. Initcssinfo = function (fnother) {
var htmlid;
var urlparm;
for (var arg in this._urlhtmlidary) {
Urlparm = This._urlparmary[arg];
Htmlid = This._urlhtmlidary[arg];
Time
if (This._tool.isfindstr (htmlid, ' Date ', true)) {//| | | this._tool.isfindstr (htmlid, ' begin ', true) | | this._ Tool.isfindstr (Htmlid, ' end ', true)) {
if ($ (htmlid). val () = = This._dateinitstr) $ (htmlid). Val ("); FF-compliant refresh, FF refresh will still bring previous values to the refreshed page
if ($ (htmlid). val () = = ') {
$ (Htmlid). Val (THIS._DATEINITSTR);
$ (htmlid). addclass (INITCSS);
}
This. Timetxtevent (Htmlid);
}
Inquire
else if (this._tool.isfindstr (htmlid, ' query ', true)) {
if ($ (htmlid). val () = = This._queryinitstr) $ (htmlid). Val ("); FF-compliant refresh, FF refresh will still bring previous values to the refreshed page
if ($ (htmlid). val () = = ') {
$ (Htmlid). Val (THIS._QUERYINITSTR);
$ (htmlid). addclass (INITCSS);
}
This. Querytxtevent (Htmlid);
}
else if (this._tool.isfindstr (htmlid, ' drop ', true)) {
Dropcss (Htmlid);
This. Dropevent (Htmlid);
}
}
if (typeof (fnother) = = ' function ') {
settimeout (fnother, 0);
}
}
This. Querytxtevent = function (htmlid) {
var searchobj = this;
$ (Htmlid). blur (function () {
$ (this). Removeclass (INITCSS);
if ($ (this). val () = = ') {
$ (this). Val (SEARCHOBJ._QUERYINITSTR);
$ (this). addclass (INITCSS);
}
});
$ (htmlid). focus (function () {
if ($ (this). val () = = Searchobj._queryinitstr) {
$ (this). Val (');
$ (this). Removeclass (INITCSS);
}
});
}
This. Timetxtevent = function (htmlid) {
var searchobj = this;
Leave event
$ (Htmlid). blur (function () {
Date to be actually filled in
if (Searchobj._tool.isshorttime (this). Val ()) {
}
else if ($ (this). Val ()!= ') {
Alert (' Please enter the date format correctly, such as: 2010-1-1 ');
}
if ($ (this). val () = = ') {
$ (this). Val (SEARCHOBJ._DATEINITSTR);
$ (this). addclass (INITCSS);
}
else {
$ (this). Removeclass (INITCSS);
}
});
$ (htmlid). focus (function () {
if ($ (this). val () = = Searchobj._dateinitstr) {
$ (this). Val (');
$ (this). Removeclass (INITCSS);
}
});
}
This. Dropevent = function (htmlid) {
$ (htmlid). Change (function () {
Dropcss (Htmlid);
});
}
For browser compatibility, different viewers have different font color settings for select
function Dropcss (htmlid) {
if ($ (htmlid). Val ()!= ') {
$ (htmlid). Removeclass (INITCSS);
var count = 0;
$ (htmlid + ' Option:first '). addclass (INITCSS);
}
else {
$ (htmlid). addclass (INITCSS);
var count = 0;
$ (htmlid + ' option '). each (function () {
if (Count > 0) {
$ (this). CSS (' color ', ' black ');
}
count++;
});
}
}
}
Six. Summary:
This search class for the work to bring a lot of convenience, of course, their own JS and jquery learning or the initial stage, if there are bugs please put forward, I will change in time.
seven. Download
Code package download
