Home > Developer > JavaScript
I hope this note will be useful to myself and everyone, but I have a limited level. If something goes wrong, I hope you can point out more criticism. Thank you!
Starting today, we will use easyui in combination. During this period, I will give a general introduction to the following APIs:
Today, we will first begin with a dialog login interface, as well as a pop-up window (message framework) after logon Failure and Success ):
I will not introduce the background code here. If you write the background code, the background code will be added. The time is limited.
1 <link href = "jquery-easyui-1.3.2/themes/default/easyui.css" rel = "stylesheet" type = "text/css"/>
2 <! -- The most comprehensive style package of easyui can also be referenced separately. -->
3 <link href = "jquery-easyui-1.3.2/themes/icon.css" rel = "stylesheet" type = "text/css"/>
4 <! -- Easyui comes with an image style package. You can also add it on your own -->
5 <script src = "jquery-easyui-1.3.2/jquery-1.8.0.min.js" type = "text/javascript"> </script>
6 <! -- I am using easyui 1.3.2, based on jquery-1.8.0 -->
7 <script src = "jquery-easyui-1.3.2/jquery. easyui. min. js" type = "text/javascript"> </script>
8 <! -- Easyui js package -->
9 <script src = "jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type = "text/javascript"> </script>
10 <! -- Easyui Chinese Language Pack, which defaults to English -->
11 <script type = "text/javascript">
12 $ (function (){
13 // Initialization
14 initTable ();
15 });
16
17 // writing habits
18 function initTable (){
19 $ ("# dd"). dialog ({
20 closable: false, // close button in the upper right corner. Because the dialog framework is associated with the window framework and the window framework is associated with the panel framework, this API is found in the panel framework.
21 title: "login interface", // name in the upper left corner of the dialog
22 modal: true, // Model
23 width: 300,
24 height: 200,
25 buttons: [// button in the lower-right corner of the dialog, which is added as a Json Array
26 {
27 text: "login", // button name
28 iconCls: "icon-save", // picture displayed on the left of the button
29 handler: function () {// method of departure after clicking the button
30 // JQuery ajax asynchronous background submission
31 loginFunc ();
32}
33 },{
34 text: "Registration ",
35 handler: function (){
36 // register and write again tomorrow. The form submission method provided by easyui and the ValidateBox verification method will be used.
37}
38}]
39 });
40}
41
42 // User Logon
43 function loginFunc (){
44 // here I am writing the simplest JQuery Asynchronous Method. For more information, see the JQuery reference manual.
45 // parameters to be passed in the background
46 var res = $ ("# loginForm"). serialize (); // serialize the content of the form. The original value method can also be used here.
47 // mvc and webform can be passed directly to the background
48 $. post ("/Login. ashx", res, function (data ){
49 if (data = "OK") {// if it is passed in the background, OK indicates that the logon is successful.
50 $ ("# dd"). dialog ("close"); // close the dialog
51 $. messager. show ({// the pop-up box in the lower right corner of the browser. I have listed several attributes. For details, refer to the API
52 title: 'hs ',
53 msg: 'Congratulations, login successful! ',
54 timeout: 5000, // The retention time of the bullet box
55 showType: 'slide' // display style
56 });
57} else {
58 $. message. alert ('hprompt ', "Logon Failed", "error"); // The message framework of easyui is used here, and a prompt message is displayed.
59 // here there are three parameters. The first parameter is Title. The second parameter is display information. The third parameter is the actual icon style, such as error and warning. For details, see the API or demo.
60}
61 });
62}
63 </script>
64 65 <body>
66 <div id = "dd">
67 <form id = "loginForm" method = "POST">
68 <table>
69 <tr>
70 <th>
71 User Name
72 </th>
73 <td>
74 <input name = "username" type = "text"/>
75 </td>
76 </tr>
77 <tr>
78 <th>
79 Password
80 </th>
81 <td>
82 <input name = "password" type = "password"/>
83 </td>
84 </tr>
85 </table>
86 </form>
87 </div>
88 </body>
89
Login interface
Logon failure dialog box
Pop-up window in the lower right corner of login success
At work, I saw a comment. I added a temporary background code, but it was not very detailed and there was no link to the database. Sorry.
1 public void ProcessRequest (HttpContext context)
2 {
3 context. Response. ContentType = "text/plain ";
4 // check whether the reception front-end data is null. If not, an error may be reported.
5 string name = context. Request. Form ["username"] = null? Null: context. Request. Form ["username"]. ToString ();
6 string password = context. Request. Form ["password"] = null? Null: context. Request. Form ["password"]. ToString ();
7 if (string. IsNullOrEmpty (name) | string. IsNullOrEmpty (password) // determines whether a received value is null. if it is null, the page is redirected to the error page or data is directly returned.
8 // The returned data should be like this:
9 // context. Response. Write ("the user name or password cannot be blank! ");
10 // context. Response. End ();
11 {
12 context. Response. Redirect ("ErrorPage.htm ");
13 context. Response. End ();
14}
15 int res = 1; // here the data is queried from the database and the number of response lines is returned, so I will not write this details.
16 if (res <= 0)
17 {
18 context. Response. Write ("Logon Failed! ");
19 context. Response. End ();
20}
21 context. Response. Write ("OK ");
22 context. Response. End ();
23}
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
