jQuery练习(用户登录)

最新推荐文章于 2009-01-06 15:56:00 发布

greatverve

最新推荐文章于 2009-01-06 15:56:00 发布

阅读量1k

点赞数

分类专栏： JS.JQuery 文章标签： jquery json callback class button function

本文链接：https://blog.csdn.net/greatverve/article/details/3588049

版权

JS.JQuery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

下载地址：

http://download.csdn.net/source/899554

前台

 
 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="test_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> 
    <title>jQueryAjax登录</title> 
    <style type="text/css"> 
        .show{ display:block;} 
        .hide{ display:none;} 
    </style> 
    <script type="text/javascript" src="../js/jquery-1.2.6.js"></script> 
    <script type="text/javascript"> 
        /*********注意********
            如果定义了class即<div class="">则addClass()失效。
            用.css("display","block");取代，可能是优先级问题。
            //$('#wait').addClass("hide"); 
        */
        function myajax(){   
            if(($("#txtname").val()=="")||($("#txtpwd").val()==""))
                alert('用户名和密码不可为空！');
            else
            {
                $.ajax({ 
                    type:'post', 
                    url:'AjaxServer.aspx', 
                    data:jsonData(), 
                    dataType:'json', 
                    beforeSend:beforecall, 
                    success:callback 
                }); 
            }
        } 
        //封装json数据，为了代码清晰 
        function jsonData(){ 
            var jsonStr="({"; 
            jsonStr+="/"name/":"; 
            jsonStr+="/""+$("#txtname").val()+"/""; 
            jsonStr+=","; 
            jsonStr+="/"pwd/":"; 
            jsonStr+="/""+$("#txtpwd").val()+"/""; 
            jsonStr+="})"; 
            return eval(jsonStr); 
        } 
        //回调前方法
        function beforecall(){ 
            $('#wait').css("display","block"); 
            $('#wait').html('调出中...'); 
        } 
        //回调函数 
        function callback(data){ 
            if(data.sta=="1")
            {
                $('#wait').html("欢迎你，"+data.name);
                $('#loginpanel').addClass("hide");
            }
            else
            {
                $('#wait').css("display","none"); 
                alert(data.info);
            }
        } 
        $(function(){ 
            $('#confirm').click(myajax); 
        }) 
    </script> 
</head> 
<body> 
    <div id="wait" class="hide">显示进度</div> 
    <div id="loginpanel">
        <input id="txtname" type="text" /><br />
        <input id="txtpwd" type="text" /><br />
        <input id="confirm" type="button" value="登录" />
    </div>
</body> 
</html>
 

后台

 
 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 test_AjaxServer : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Hashtable ht = new Hashtable();
        string name = Request.Params["name"].ToString();
        string pwd = Request.Params["pwd"].ToString();
        if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(pwd))
        {
            if (Check(name,pwd))//调用业务逻辑 
            {
                ht.Add("info", "成功了");
                ht.Add("sta", "1");
            }
            else
            {
                ht.Add("info", "用户名或密码错误");
                ht.Add("sta", "0");
            }
            ht.Add("name", name);
            Response.Write(CreateJsonParams(ht));
        }
        Response.End();
    }
    //构造json数据 
    private string CreateJsonParams(Hashtable items)
    {
        string returnStr = "";
        foreach (DictionaryEntry item in items)
        {
            returnStr += "/"" + item.Key.ToString() + "/":/"" + item.Value.ToString() + "/",";
        }
        return "{" + returnStr.Substring(0, returnStr.Length - 1) + "}";
    }
    /// <summary> 
    /// 执行业务逻辑 
    /// </summary> 
    /// <param name="name"></param> 
    /// <param name="pwd"></param> 
    /// <returns></returns> 
    private bool Check(string name, string pwd)
    {
        if ((name == "admin") && (pwd == "admin"))
            return true;
        else
            return false;
    }
}
 

end

greatverve

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery练习(用户登录)

下载地址：http://download.csdn.net/source/899554前台%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="test_Default" %>html xmlns="http://www.w3.org/1999/xhtm
复制链接

扫一扫

专栏目录