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 (a specific query is implemented by a query statement consisting of parameters in the url obtained by the server code ).
Ii. Preparations: (download code)
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
1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 3 4 <title> </title>
5 <style type = "text/css">
6. initCss {color :# 666666}
7 </style>
8 <script type = "text/javascript" src = "JS/jquery. js"> </script>
9 <script type = "text/javascript" src = "JS/Tool. js"> </script>
10 <script type = "text/javascript" src = "JS/Search. js"> </script>
11 <script type = "text/javascript">
12 $ (function (){
13var search = new Search ('initcss ');
14search. _ urlhtmary ary ['other'] = '# dropOther ';
15search. _ UrlParmAry ['other'] =' Mce: 2 // Mce: 3 // ; Background-color: # f5f5f5; color: #000000; "> other]> ';
16search. _ urlhtmary ary ['othertxt '] =' # txtOther ';
17search. _ UrlParmAry ['othertxt '] = 'othertxt ';
18
19search. InitBind ();
20search. SearchApply ('# searchBut', 'search.htm ');
21 });
22 function Other (){
232.16('0000txtother'0000.css ('color', 'red ');
24}
25 </script>
26 27 <body>
28 <p> time: <input id = "txtDate" type = "text"/> </p>
29 <p> Start Time: <input id = "txtDateBegin" type = "text"/> </p>
30 <p> End Time: <input id = "txtDateEnd" type = "text"/> </p>
31 <p> query 1:
32 <select id = "dropWay">
33 <option value = ""> all </option>
34 <option value = "1"> Part 1 </option>
35 <option value = "2"> Part 2 </option>
36 </select>
37 </p>
38 <p> query 2:
39 <select id = "dropOther">
40 <option value = ""> Other </option>
41 <option value = "1"> Other1 </option>
42 <option value = "2"> Other2 </option>
43 </select>
44 </p>
45 <p> query: <input id = "txtQuery" type = "text"/> </p>
46 <p> query others: <input type = "text" id = "txtOther"/> </p>
47 <p> only query data of the current user: <input type = "checkbox" id = "cbShowMe"/> </p>
48 <p> <input type = "button" id = "searchBut" value = "query"/> </p>
49 </body>
50
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"; 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 ", 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:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
