使用php跳转界面和AJAX都可实现登录界面的跳转的登录失败对的提醒。但是，php跳转的方式

需要额外加载其他界面，用户体验差。AJAX可实现当前页面只刷新需要的数据，不对当前网页进行

重新加载或者是跳转。

做一个简单的登录界面：

<div id="">
			用户名 :
			<input type="text" name="" id="uid" value="" />
		</div>
		<div id="">
			密 码 :
			<input type="text" name="" id="pwd" value="" />
		</div>
		<div id="">
			<input type="button" name="" id="denglu" value="登录" />
		</div>

　　

然后是js代码，使用jq比较简单，所以要先引入jq文件包。

其次获取用户名和密码的值：

var uid = $("#uid").val();
	var pwd = $("#pwd").val();

　　

设置好之后就可以进行AJAX的设置了：

$.ajax({
		type: "post",
		url: "dengluchuli.php",
		data: {
			u: uid,
			p: pwd
		},
		dataType: "TEXT",
		success: function(r) {                    //r为返回值
			if(r.trim() == "y") {              //y为 url跳转网页中传回的值。
				window.location.href = "跳转界面";
			} else {
				alert("用户名或密码错误");
			}
		}
	});

　　

dengluchuli.php：
<?php
include("AJAXLOGIN.class.php");
$dd = new LoGin($_POST["u"],$_POST["p"]);
$ae = $dd::logi("login","username","password","name");	 //分别是数据库中的  表名，表中的用户名，密码，姓名（数据从数据库中导入）
?>

　　

这里我引入了一个登录类（AJAXLOGIN.class.php），是为了以后方便使用：

<?php
class DBDA
{
	public $host="localhost";
	public $uid = "root";
	public $pwd = "";
	public $dbname = "12345";

	//成员方法
	public function Query($sql,$type=1)
	{
		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
		$r = $db->query($sql);

		if($type==1)
		{
			return $r->fetch_all();
		}
		else
		{
			return $r;
		}
	}
}

class LoGin
{
	 	public static $uid ;
		public static $pwd ;
		function __construct($x,$y)
	    {
	       self::$uid = $x;
		   self::$pwd = $y;
	    }
		static function logi ($table,$username,$password,$name){
		$db = new DBDA();
		$nnn = self::$uid;
		$sql = " select $name,$password from $table where $username='$nnn '" ;
		$at = $db->Query($sql);
		$p = self::$pwd;
		if(!empty($p) && $p==$at[0][1])
			{
				$_SESSION["uid"]= $at[0][0];
				echo "y";
			}
			else{
				echo "n";
			}
		}
}
?>

　　

　　

登录界面完整代码：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<script src="../jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="">
			用户名 :
			<input type="text" name="" id="uid" value="" />
		</div>
		<div id="">
			密 码 :
			<input type="text" name="" id="pwd" value="" />
		</div>
		<div id="">
			<input type="button" name="" id="denglu" value="登录" />
		</div>
	</body>
	<script type="text/javascript">
	$("#denglu").click(function() {

	var uid = $("#uid").val();
	var pwd = $("#pwd").val();

	$.ajax({
		type: "post",
		url: "dengluchuli.php",
		data: {
			u: uid,
			p: pwd
		},
		dataType: "TEXT",
		success: function(r) {
			if(r.trim() == "y") {
				window.location.href = "ppp.php";
			} else {
				alert("用户名或密码错误");
			}
		}
	});

})</script>
</html>

　　

AJAX实现登录界面的更多相关文章

  1. 前端 ajax 改写登录界面

    SSM 整合项目开发到一个阶段,想慢慢地把前台框架等技术引入进来 突然碰到一个困惑好久的问题: ajax 替换原本 form 表单 post 提交登录: 一直 404 错误,心塞.... 最后发现原来 ...

  2. 使用 jQuery Ajax 异步登录，并验证用户输入信息（maven）

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...

  3. 二、Django用Eclipse编写一个登录界面

    一.Django用Eclipse编写一个登录界面 二.Django用Eclipse编写一个登录界面Ajax和Django交互 各软件版本:Python 2.7.14,django 1.6.11 原来已 ...

  4. 一、Django用Eclipse编写一个登录界面

    一.Django用Eclipse编写一个登录界面 二.Django用Eclipse编写一个登录界面Ajax和Django交互 Eclipse安装Python插件和Django的步骤直接省略. 创建de ...

  5. FineReport中如何自定义登录界面

    在登录平台时,不希望使用FR默认的内置登录界面,想通过自定义登录界面实现登录操作,内置登录界面如下图: 登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证. ...

  6. 基于easyUI实现登录界面

    此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 准备工作 1. 点击此下载相关文件,并把文件放到 ims 工程对应的文件夹下 二. 相关文件介绍 1. login.jsp: ...

  7. [实战]MVC5+EF6+MySql企业网盘实战(6)——ajax方式登录

    写在前面 今天回来的比较早,就趁着有空,把登录的代码更新一下.上篇文章实现了ajax的注册,这篇将实现登录,实现目标,ajax登录方式,如果勾选记住我,则下次不再输入用户名密码,直接跳转到网盘界面. ...

  8. [实战]MVC5+EF6+MySql企业网盘实战(5)——登录界面，头像等比例压缩

    写在前面 关于该项目,已经很久没更新了.实在是找不到一个好的ui,没办法就在网上找了一个还不错的,就凑合着先用着吧,先出第一版,以后的再想着去优化.最近更新与网盘项目相关的内容是准备在项目中使用一个美 ...

  9. asp.net mvc4 登录界面

    说明:开发环境 asp.net mvc4 c#语言 1.项目目录结构 2.Login控制器中 public ActionResult Index() { return View(); } 对应Inde ...

随机推荐

  1. Visual Studio 2010的MSDN帮助文档离线使用

    如果没有在安装vs过程中安装帮助,也可通过Visual Studio帮助菜单中的Manage Help Settings来对帮助进行设置或安装. 可以选择从磁盘安装内容,如果选择从磁盘安装可能会要求提 ...

  2. Linux 内核概述 - Linux Kernel

    Linux 内核学习笔记整理. Unix unix 已有40历史,但计算机科学家仍认为其是现存操作系统中最大和最优秀的系统,它已成为一种传奇的存在,历经时间的考验却依然声名不坠. 1973 年,在用 ...

  3. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  4. 比Mysqli操作数据库更简便的方式 。PDO

    下面来说一下PDO 先画一张图来了解一下 mysqli是针对mysql这个数据库扩展的一个类 PDO是为了能访问更多数据库 如果出现程序需要访问其他数据库的话就可以用PDO来做 PDO数据访问抽象层1 ...

  5. ASP.NET Core的路由[2]：路由系统的核心对象——Router

    ASP.NET Core应用中的路由机制实现在RouterMiddleware中间件中,它的目的在于通过路由解析为请求找到一个匹配的处理器,同时将请求携带的数据以路由参数的形式解析出来供后续请求处理流 ...

  6. javascript：逆波兰式表示法计算表达式结果

    逆波兰式表示法,是由栈做基础的表达式,举个例子: 5 1 2 + 4 * + 3 -  等价于   5 + ((1 + 2) * 4) - 3 原理:依次将5 1 2 压入栈中, 这时遇到了运算符 + ...

  7. UE4新手引导入门教程

    请大家去这个地址下载:file:///D:/UE4%20Doc/虚幻4新手引导入门教程.pdf

  8. OpenLiveWriter代码插件

    1.OpenLiveWriter安装 Windows Live Writer在2012年就停止了更新,Open Live Writer(以下简称OLW)是由Windows Live WriterWri ...

  9. iOS 小知识点（持续更新）

    1.如何通过代码设置Button  title的字体大小 设置Button.titleLabel.font = [UIFont systemFontOfSize:<#(CGFloat)#> ...

  10. git和pycharm管理代码

    首先明白三个概念,服务器代码库,本地代码库,和正在coding的项目. coding完毕后,先通过commit提交到本地代码库,然后通过push再提交server的代码库    git步骤 git c ...