菜鳥蔡之Ajax複習第三篇(Ajax之無重新整理登入)

來源:互聯網
上載者:User

好了,還是和以前一樣,先建一個Login.html頁面吧,用於填寫登入資訊,然後再建一個DealData.aspx頁面吧(當然,這裡用一般處理常式是最好的了:*.ashx),用來處理資料用的。

在login.html頁面中其代碼如下:

複製代碼 代碼如下:<head>
<title>無重新整理登入</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//元素繫結全域ajaxStart事件
$("#divMsg").ajaxStart(function () {
$(this).show(); //顯示span裡面的內容
})
//元素繫結全域ajaxStop事件
$("#divMsg").ajaxStop(function () {
$(this).html("請求處理已經完成!").hide();
})
$("#btnSure").click(function () {//點擊按鈕事件
var $name = $("#txtName");//擷取登入名稱
var $pwd = $("#txtPwd");//擷取密碼
if ($name.val() != "" && $pwd.val() != "") {
//調用Login()方法
Login($name.val(),$pwd.val());
} else {
if ($name.val() == "") {//如果登入名稱不為空白
alert("登入名稱不可為空!");
$name.focus();//擷取焦點
return false;
} else {
alert("密碼不可為空!");
$pwd.focus();
return false;
}
}
})
})
function Login(name, password) {
$.ajax({
type: "POST", //資料請求的方式(post或get),預設為get
url: "DealData.aspx", //發送請求的地址(預設為當前頁)
data: "action=Login&date=" + new Date() + "&name=" + name + "&pwd=" + password,//發送到伺服器的資料
//登入成功後返回的資料
success: function (data) {
if (data == "True") {//根據傳回值進行判斷(注意:Ture寫成true應該會出錯吧!)
alert("登入成功!");
//window.location = "1.htm";要跳轉的頁面
} else {
alert("登入名稱或密碼錯誤!");
return false;
}
}
});
}
</script>
</head>
<body style="text-align:center">
<div>登入名稱:<input type="text" id="txtName" value="" /></div>
<br />
<div>密 碼:<input type="text" id="txtPwd" value="" /></div><br />
<div>
<input type="reset" value="確定" id="btnSure" />
</div>
<span id="divMsg" style="display:none;">正在發送請求......</span>
</body>
</html>

在DealData.aspx中,其後台代碼如下: 複製代碼 代碼如下:public partial class ManageData : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string name = System.Web.HttpUtility.UrlDecode(Request["name"]);//擷取登入名稱
string pwd = System.Web.HttpUtility.UrlDecode(Request["pwd"]);//擷取密碼
Response.Write(Login(name, pwd));
Response.End();
}
private bool Login(string name, string pwd)
{
bool result = false;
if (name == "小菜" && pwd=="123456")
{
return true;
}
return result;
}
}

好了,童鞋,你也趕緊的試一下吧!無重新整理,你也是可以的!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.