HTML login page using JQuery
Here is the login form it has user id and password text boxes. When user clicks Login button, it calls ajaxLogin.aspx page in background process using JQuery and it returns login success or failure message and prints in one span element.
Example uses jquery.js file. You can download that file from here.
File: Login.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>Html login page</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
function login() {
var uid = $("#uid").value;var pwd = $("#pwd").value;
//var uid = document.getElementById('uid').value;
//var pwd = document.getElementById('pwd').value;
$('#resultspan').load('ajaxLogin.aspx?uid='+uid+'&pwd='+pwd);
}
</script>
</head>
<body>
<table width="65%" cellpadding="2" cellspacing="2">
<tr>
<td colspan="2"><span id="resultspan"></span></td>
</tr>
<tr>
<td width="25%">User Id:</td><td><input type="text" id="uid" /></td>
</tr>
<tr>
<td width="25%">Password:</td><td><input type="password" id="pwd" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="Login" onclick="login();" /></td>
</tr>
</table>
</body>
</html>
Here it checks that if user id is “test” and password is “test” then it does return successful login, here you can call your database and to find the login result.
File: ajaxLogin.aspx.cs
public partial class ajaxLogin : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["uid"] != null && Request.QueryString["uid"] != null)
{
if (Request.QueryString["uid"].ToString() == "test" && Request.QueryString["pwd"].ToString() == "test")
Response.Write("Login successful");
else
Response.Write("Login failure");
}
}
}
Revision number 3, Saturday, April 17, 2010 12:39:10 PM by vb_bmw
You must Login to comment.
|
Fri, Nov 21, 2008 1:13 PM
by atarikg
|
It's an unsecured way to log in, you need to encrypt the login information when sending them away to login page.
|
|
Sat, Jan 3, 2009 1:21 AM
by sanketce
|
Well said, we have to encrypt it before sending login info away from the login page, but here i just tried to demo the html page with jquery integration.
|
|
Fri, Jan 30, 2009 4:40 AM
by x-freestyler
|
I cant make it work...
|
|
Tue, Apr 28, 2009 7:36 AM
by Live wire
|
that's definitly of help
|
|
Wed, May 20, 2009 2:52 AM
by atarikg
|
But I am thinking how much it would be secure to encrypt log-in information in client side w/o using SSL Certificate or any other well-known security layers. Isn't there any other way to send them as post instead of get with encrypting it for sure...
|
|
Sun, Oct 25, 2009 2:23 AM
by gowrishankar2008
|
how to create a login page and stored in to sqlserver 2005 in asp.net
|
|
Fri, Oct 30, 2009 1:33 AM
by yrb.yogi
|
Not a good...Encrypt the login info!
|
|
Wed, Feb 10, 2010 10:05 AM
by tsolbayar
|
tell us another secure way to log in? guys.
|
|
Sat, Apr 17, 2010 1:03 AM
by vb_bmw
|
if you want to have secure way for login,you have some better solution like : 1 - using webservices ( or WCF service that is the best ) 2 - using JSON for sending and resiving data 3 - use post for sending data.
|
New
Mon, Oct 3, 2011 7:50 PM
by
|
Jquery Cross-Domain ajax call using JSONP
Hi everyone. We all know the role of ajax and its implementation. We can use ajax in asp.net as well as in javascript/jquery. But there is a limitation of same origin policy. i.e. we can only use ajax to post and get requests within our site. We can call webservices
|
Revision #6
Thu, Oct 7, 2010 8:42 AM
by
|
JQuery: A Quick Start Guide
This article is an introduction to JQuery. It is for those people who always heard JQuery but never used it or don’t know where to start from.What is JQuery? JQuery is a powerful JavaScript library, yes it is not a language. JQuery helps us to write clean
|
New
Wed, Sep 5, 2012 8:31 PM
by
|
How to Block the Page, When Data is Submitting.
Introduction: To Block the Page when Data is Submitting, we have various options, Either we can use Ajax based UpdateProgress or some jQuery Stuff. But sometime Ajax UpdateProgress not very useful because of complexity. So, the better approch appoach is to
|
Revision #2
Thu, May 12, 2011 7:25 AM
by
|
Sending js Array object in jQuery Ajax post
The post name should be “Serializing to JSON in jQuery” or something like that but I kind of twisted it the way I faced this issue. If you’re looking for how to do the ajax calling in jQuery and blah da… then you should keep googling cause this post ain’t
|