ASP.NET基於JQUERY的AJAX的驗證登入（JSON）

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

近來想做個JQUERY的AJAX的登入驗證，登入不是問題，但是JQUERY的資料驗證格式是JSON格式，這下有點難道我了，

因為我以前沒學過JSON，於是上百度和google上搜尋關於這方面的案例，但是搜到都是PHP的，.NET的少之又少（幾乎沒有益一個完整的DEMO），由於現在PHP開源架構非常多，而且他們的內部已經封裝好了對JSON資料的轉化，所以開發人員根本不必關心它內部是怎麼轉化的，所以對於PHP來說這個JQUERY驗證就容易的所了。

下面是自己寫的DEMO，

注意看我的編寫目錄。

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">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>首頁</title>
   <script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/thickbox.js" type="text/javascript"></script>
<link type="text/css" href="css/thickbox.css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
    <div style="margin-left:auto; margin-right:auto;width:400px;">
    <a href="ajaxLogin.html?height=120&width=250&modal=false" class="thickbox" title="請登入">
    我要進行JQUERY登入驗證</a>
    <br />
    帳號：admin<br/>
    密碼：admin<br />
    </div>

</form>

</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">

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)
    {
        //執行登入驗證的方法
      checklogin();

    }
    public void checklogin()
    {
        //獲得登入頁面POST過來的參數
        string username = Request.Params["id"].ToString();
        string userpwd = Request.Params["pwd"].ToString();
        if (username == "admin" && userpwd == "admin")
        {
            //如果登入成功則構造這樣序列化好的JSON格式的資料
           // 這裡我用1來表示成功，大家可以隨便用什麼表示都可以
            Response.Write(CreareJson("這裡面可以隨便寫點什麼", 1));
        }
       else
        {
           // 否則是這樣的
            Response.Write( CreareJson("這裡面可以隨便寫點什麼", 0));
        }
       // end方法一定要寫終止用戶端的執行
        Response.End();
    }
    /// <summary>
    /// 定義一個方法用來輸出標準的JSON格式資料
    /// </summary>
    /// <param name="info">用來描述一般字串</param>
    /// <param name="sta">這個用來表示和ajax傳輸過來資料比較的一個key和value，不一定非用這個表示</param>
    /// <returns>返回標準JSON格式字串</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>登入</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>

// JScript 檔案
$(document).ready(function(){
          //擷取登入按的事件並啟用click事件
        $('#LoginBtn').click(function(){
             chacklogin();
        });
    });

function chacklogin()
{
var login_id=$('#login_id').val();
var login_pwd=$('#login_pwd').val();
if (login_id=='')
{
    $('#confirm').html('請輸入登入ID');
    $('#login_id').focus();
    return false;
}
if(login_pwd =='')
{
    $('#confirm').html('請輸入登入密碼');
    $('#login_pwd').focus();
    return false;
}

$.ajax({
type: 'POST',//URL方式為POST
url: 'login.aspx',//這裡是指向登入驗證的頁面
data:'id='+login_id+'&pwd='+login_pwd,//把要驗證的參數傳過去
dataType:'json',//資料類型為JSON格式的驗證
//在發送資料之前要啟動並執行函數
beforeSend:function(){
$('#confirm').html('登入中.........');
},
success:function(data)
          {
                //這是個重點，根據驗證頁面（login.aspx）輸出的JSON格式資料判斷是否登入成功
                //這裡我用1表示的
                //sta就是那個輸出到用戶端的標示
                if(data.sta==1)
                {
                    $('#confirm').html('登入成功！');location.href='loginOK.htm';
                }
                else
                {
                   $('#confirm').html('密碼都沒輸入正確還想進,哼！').addClass('red');

                }
        }
});
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

ASP.NET基於JQUERY的AJAX的驗證登入（JSON）

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support