密码表单文本

使用 JQuery 的 HTML 登录页面

ASP.NET 社区

0/5 (0投票)

2013 年 10 月 11 日

CPOL

13567

这是一个登录表单，包含用户 ID 和密码文本框。当用户点击“登录”按钮时，它会在后台调用 ajaxLogin.aspx 页面。

这是一个登录表单，包含用户 ID 和密码文本框。当用户点击“登录”按钮时，它使用 JQuery 调用后台的 ajaxLogin.aspx 页面，并返回登录成功或失败的消息，并在一个 span 元素中显示。

示例使用了 jquery.js 文件。您可以从这里下载该文件。

文件：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>

这里检查用户 ID 是否为“test”且密码是否为“test”，如果是，则返回成功的登录结果。在这里，您可以调用您的数据库来查找登录结果。

文件： 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");
        }
    }
}