Recently, I want to perform jquery Ajax login verification. login is not a problem, but jquery's data verification format is in JSON format. Is it me,
I have never studied JSON before, so I searched for cases on Baidu and Google, but I found them all in PHP ,. net (almost no complete demo), because there are many open-source PHP frameworks, and their internal packages have encapsulated the conversion of JSON data, therefore, developers do not have to worry about how it is converted internally, so jquery verification is easy for PHP.
Below is a self-written demo,
Pay attention to my compiling directory.
Default. aspx
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "_ default" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Home
</Body>
</Html>
Login. aspx
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "login. aspx. cs" inherits = "login" %>
<! 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> logon verification </title>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
</Div>
</Form>
</Body>
</Html>
Login. aspx. CS
Using system;
Using system. Data;
Using system. configuration;
Using system. collections;
Using system. Web;
Using system. Web. Security;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. webcontrols. webparts;
Using system. Web. UI. htmlcontrols;
Public partial class login: system. Web. UI. Page
{
Protected void page_load (Object sender, eventargs E)
{
// How to perform logon Verification
Checklogin ();
}
Public void checklogin ()
{
// Obtain the post parameters on the logon page
String username = request. Params ["ID"]. tostring ();
String userpwd = request. Params ["PWD"]. tostring ();
If (username = "admin" & userpwd = "admin ")
{
// If the logon succeeds, the serialized JSON format data will be constructed.
// Here I use 1 to indicate success. You can use whatever it means.
Response. Write (crearejson ("what can be written here", 1 ));
}
Else
{
// Otherwise
Response. Write (crearejson ("what can be written here", 0 ));
}
// The end method must be written to terminate the execution of the client.
Response. End ();
}
/// <Summary>
/// Define a method to output standard JSON format data
/// </Summary>
/// <Param name = "info"> used to describe a general string </param>
/// <Param name = "sta"> This is a key and value used to compare the data transmitted with Ajax. It is not necessarily expressed as this </param>
/// <Returns> Returns a string in the standard JSON format </returns>
Private string crearejson (string info, int Sta)
{
Return "{\" info \ ": \" "+ info +" \ ", \" sta \ ":" + sta + "}";
}
}
Ajaxlogin.html
<! 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> logon </title>
<SCRIPT src = "JS/login. js" type = "text/JavaScript"> </SCRIPT>
<Style type = "text/CSS">
. Red {
Color: # ff0000;
}
</Style>
</Head>
<Body>
<Form method = "Post" Action = "login. aspx" id = "login_form" name = "login_form">
<Div style = "text-align: Center">
<Table border = "0" cellpadding = "3" cellspacing = "3" style = "margin: 0 auto;">
<Tr>
<TD> <label> username </label>
: </TD>
<TD> <input name = "login_id" id = "login_id" type = "text" size = "20"/> </TD>
</Tr>
<Tr>
<TD> <label> password </label>
: </TD>
<TD> <input name = "login_pwd" id = "login_pwd" type = "password" size = "20"/> </TD>
</Tr>
<Tr align = "right">
<TD colspan = "2">
<Input type = "button" id = "loginbtn" value = "login"/> <input type = "button" id = "submit1" value = "cancel" onclick = "tb_remove () "/> </TD>
</Tr>
</Table>
<Div id = "Confirm"> </div>
</Div>
</Form>
</Body>
</Html>
Login. js
// JScript File
$ (Document). Ready (function (){
// Obtain the logon event and activate the Click Event
$ ('# Loginbtn'). Click (function (){
Chacklogin ();
});
});
Function chacklogin ()
{
VaR login_id = $ ('# login_id'). Val ();
VaR login_pwd = $ ('# login_pwd'). Val ();
If (login_id = '')
{
Login ('login confirm'login .html ('Enter the login id ');
$ ('# Login_id'). Focus ();
Return false;
}
If (login_pwd = '')
{
Login ('login confirm'login .html ('enter your login password ');
$ ('# Login_pwd'). Focus ();
Return false;
}
$. Ajax ({
Type: 'post', // The URL is post
URL: 'login. aspx ', // The logon verification page is displayed.
Data: 'id = '+ login_id +' & Pwd = '+ login_pwd, // pass the parameters to be verified
Datatype: 'json', // verify that the data type is in JSON format
// Function to be run before sending data
Beforesend: function (){
Login ('login confirm'login .html ('login .........');
},
Success: function (data)
{
// This is the focus. Check whether the logon is successful Based on the JSON format data output on the verification page (login. aspx ).
// Here I use 1
// Sta is the identifier of the output to the client.
If (data. Sta = 1)
{
Login ('login confirm'login .html ('login successful! 'Your region location.href}'loginok.htm ';
}
Else
{
Certificate ('{confirm'{.html ('you still want to enter the correct password, hum! '). Addclass ('red ');
}
}
});
}
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
