使用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. 创建 OVS flat network - 每天5分钟玩转 OpenStack（134）

    上一节完成了 flat 的配置工作,今天创建 OVS flat network.Admin -> Networks,点击 "Create Network" 按钮. 显示创建页 ...

  2. C++中的变长参数

    新参与的项目中,为了使用共享内存和自定义内存池,我们自己定义了MemNew函数,且在函数内部对于非pod类型自动执行构造函数.在需要的地方调用自定义的MemNew函数.这样就带来一个问题,使用stl的 ...

  3. 从阿里巴巴笔试题看Java加载顺序

    一.阿里巴巴笔试题: public class T implements Cloneable { public static int k = 0; public static T t1 = new T ...

  4. 云计算下PAAS的解析一

    云计算下PAAS的解析一       PaaS是Platform-as-a-Service的缩写,意思是平台即服务. 把服务器平台作为一种服务提供的商业模式.通过网络进行程序提供的服务称之为SaaS( ...

  5. Android开发学习—— shape标签的使用

    参考这片文章http://www.cnblogs.com/armyfai/p/5912414.html

  6. MySQL Workbench建表时 PK NN UQ BIN UN ZF AI 的含义

    [转自网络]https://my.oschina.net/cers/blog/292191 PK Belongs to primary key 作为主键 NN Not Null 非空 UQ Uniqu ...

  7. mysql查询性能优化

    mysql查询过程: 客户端发送查询请求. 服务器检查查询缓存,如果命中缓存,则返回结果,否则,继续执行. 服务器进行sql解析,预处理,再由优化器生成执行计划. Mysql调用存储引擎API执行优化 ...

  8. oracle常用的快捷键

    最近在开发过程中,遇到一些麻烦,就是开发效率问题,有时候其他同事使用PLSQL 编程效率明显高于自己,观察了好久,才发现他使用PLSQL 已经很长时间了而且,他自己也在其中添加了好多快捷方式, 1.登 ...

  9. .NET跨平台：在CentOS上编译dnx并运行ASP.NET 5示例程序

    在之前的博文中我们在 Ubuntu 上成功编译出了 dnx ,并且用它成功运行了 ASP.NET 5 示例程序.在这篇博文中我们将 Ubuntu 换成 CentOS. 目前 dnx 的编译需要用到 m ...

  10. 微软收购Xamarin，你怎么看？

    今天的最大新闻就是微软收购热门初创企业Xamarin,从网上的反馈大部分都是积极的,也有担心微软在把Xamarin移动开发技术整合进VS的同时,还很有可能废掉MONO的GUI客户端能力只保留.net ...