Home > Others

Implementation Code for query operations based on jquery

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I. What does this Article do:
 You can use JavaScript to obtain user operations and modify URL parameters to implement certain functions, such as query (the specific query is performed by the server side. Code Obtain the parameter composition query statement in the URL ).
Ii. preparations:
 A jquery class library (my version is 1.3.2) and a tool Library (tool. JS, basically all code from online search), A Query Class Library (search. JS, self-written), an HTM page (used for exercises), add these JS Code to the page HTM page.
Htm page Copy code The Code is as follows: <! 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>
<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. _ urlhtmpolicary ['other'] = '# dropother ';
Search. _ urlparmary ['other'] = 'other ';
Search. _ urlhtmpolicary ['othertxt '] =' # txtother ';
Search. _ urlparmary ['othertxt '] = 'othertxt ';
Search. initbind ();
Search. searchapply ('# searchbut', 'search.htm ');
});
Function other (){
Certificate ('0000txtother'0000.css ('color', 'red ');
}
</SCRIPT>
</Head>
<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> query 1:
<Select id = "dropway">
<Option value = ""> all </option>
<Option value = "1"> Part 1 </option>
<Option value = "2"> Part 2 </option>
</SELECT>
</Div>
<Div> query 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 others: <input type = "text" id = "txtother"/> </div>
<Div> only query your own data: <input type = "checkbox" id = "cbshowme"/> </div>
<Div> <input type = "button" id = "searchbut" value = "query"/> </div>
</Body>
</Html>

Iii. Introduction to search. js

A. Support for jquery and tool JS scripts is required.
B. some ID and URL parameters are included by default, which are stored in _ urlhtmary ary and _ urlparmary. Of course, these two can be combined into one. If you want to add a new ID, start with # and add the corresponding URL parameter name.
C. the text ID should preferably contain txt (the query box needs special care and query); The time Id contains date (the start time in the text contains begin, and the end time contains end ); the multiple-choice box ID contains CB, and the drop-down box ID contains drop. These are all for the centralized management of JavaScript.
D. When a search object is created, a CSS parameter is passed in. This CSS is mainly implemented, for example, the font color of the drop-down box when it is not selected.
E. When the time query box is not filled in, the default value is "XXXX-XX-xx"; the query box (query), the default value is "keyword ...". They all added the effect of passing in CSS. When the content is changed, the CSS effect is removed.

4. Call search. js

A. First, run the HTM page. Get:

B. change var search = new search ('initcss ') in the JS Code in the previous HTM page to VaR search = new search (); refresh the page, we will find the "keyword... "," XXXX-XX-xx ", and the font color in the drop-down box has changed,

This is the role of this parameter. Restore the code.

C. Operate the page at will, and then press the query button or directly enter: http: // localhost: 1406/search.htm? Way = 1 & query = % u4f60 % u597d & date = 2010-4-20 & Me = T & bdate = 9-9-1-1 & edate = 9-9-1-2 & Other = 1 & othertxt = helloworld, get something like:

The JS Code has bound the URL parameter content to the page.

D. Remove it now

Search. _ urlhtmpolicary ['other'] = '# dropother ';

Search. _ urlparmary ['other'] = 'other ';

Search. _ urlhtmpolicary ['othertxt '] =' # txtother ';

Search. _ urlparmary ['othertxt '] = 'othertxt ';

Refresh the page and you will find that no query 2 is bound to other query content. This is because _ urlhtmary ary and _ urlparmary have no corresponding values at the moment and no corresponding data is operated .,

Restore code.

E. Now, change search. initbind (other); to search. initbind (); the other font colors in the query are black, not the previous red ,,

This is because no method parameter is added for the initbind () method. This parameter can be extended without changing the initbind () method. Restore the code.

F. The first parameter of the searchapply method is '#' with the ID of an operation button (the search class will add a carriage return event for the button), and the second parameter is the URL address of the page orientation.
Code 5
Tools. js

Copy code The Code is as follows: // tool class
Function Tool (){
// String replacement and formatting ('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;
}
}
// Obtain 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 location of Characters in the string. If iscase is set to true, Case sensitivity 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;
}
}
// Check whether the corresponding character iscase exists in the string search = true indicates that the case sensitivity is ignored.
This. isfindstr = function (STR, findstr, iscase ){
Return this. findstr (STR, findstr, iscase)> 0? True: false;
}
// Verify the short date 2010-2-2
This. isshorttime = function (STR ){
VaR r = Str. match (/^ (\ D {}) (-| \/) (\ D {}) \ 2 (\ D {}) $ /);
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 The Code is as follows: function search (initcss ){
This. _ tool = new tool ();
This. _ urlparmary = {way: 'way', query: 'query', Date: 'date', me: 'me', bdate: "bdate", edate: "edate "};
This. _ urlhtmpolicary = {way: '# dropway', query: '# txtquery', Date: '# txtdate', me: '# cbshowme', bdate: "# txtdatebegin ", edate: "# txtdateend "};
This. _ dateinitstr = 'xxxx-XX-xx ';
This. _ queryinitstr = 'keyword ...';
This. _ ARGs = This. _ tool. geturlparms ();
This. initbind = function (fnother ){
For (var arg in this. _ ARGs ){
$ (This. _ urlhtmary ary [Arg]). ATTR ('checked', true );
$ (This. _ urlhtmary ary [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. _ urlhtmary ary [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;
}
}
// Process 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;
}
}
// Process the drop-down list
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 key 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. _ urlhtmary ary ){
Urlparm = This. _ urlparmary [Arg];
Htmlid = This. _ urlhtmary ary [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 (''); // compatible with FF refresh. After FF refresh, the previous values will still be taken to the refreshed page.
If ($ (htmlid). Val () = ''){
$ (Htmlid). Val (this. _ dateinitstr );
$ (Htmlid). addclass (initcss );
}
This. timetxtevent (htmlid );
}
// Query
Else if (this. _ tool. isfindstr (htmlid, 'query', true )){
If ($ (htmlid ). val () = This. _ queryinitstr) $ (htmlid ). val (''); // compatible with FF refresh. After FF refresh, the previous values will still be taken 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;
// Exit event
$ (Htmlid). Blur (function (){
// Enter the exact date
If (searchobj. _ tool. isshorttime ($ (this). Val ())){

}
Else if ($ (this). Val ()! = ''){
Alert ('Enter the date format correctly, for example, 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, the Select font color is set differently for different browsers
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 ){
Watermark (this).css ('color', 'black ');
}
Count ++;
});
}
}
}

6. Summary:
This search class brings a lot of convenience to the work. Of course, I am still in the initial stage of JS and jquery learning. If there is a bug, please submit it and I will change it in time.

7. Download
Package and download code

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More