thickbox.js插件学习

最新推荐文章于 2018-07-08 00:29:06 发布

greatverve

最新推荐文章于 2018-07-08 00:29:06 发布

阅读量1.7k

点赞数

分类专栏： JS.JQuery 文章标签： login json function stylesheet button server

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

版权

JS.JQuery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

源码下载地址：http://download.csdn.net/source/902869

主页面: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>
 

弹出iframe的src页面：

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

Ajax请求页面： login.aspx

 
 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 + "}";
    }
}
 

请求成功后页面：loginOK.htm

 
 <!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>
</head>
<body>
Jquery登录成功！
</body>
</html>
 

需要修改的js文件：

 
 // 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');
                
                }
        }
  });
}
 

end