使用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. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  2. JavaScript 开发规范

    本篇主要介绍JS的命名规范.注释规范以及框架开发的一些问题. 目录 1. 命名规范:介绍变量.函数.常量.构造函数.类的成员等等的命名规范 2. 注释规范:介绍单行注释.多行注释以及函数注释 3. 框 ...

  3. 6. ModelDriven拦截器、Preparable 拦截器

    1. 问题 Struts2 的 Action 我们将它定义为一个控制器,但是由于在 Action 中也可以来编写一些业务逻辑,也有人会在 Action 输入业务逻辑层. 但是在企业开发中,我们一般会将 ...

  4. 谱聚类（spectral clustering）原理总结

    谱聚类(spectral clustering)是广泛使用的聚类算法,比起传统的K-Means算法,谱聚类对数据分布的适应性更强,聚类效果也很优秀,同时聚类的计算量也小很多,更加难能可贵的是实现起来也 ...

  5. 【基于WinForm+Access局域网共享数据库的项目总结】之篇一：WinForm开发总体概述与技术实现

    篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...

  6. 【架构设计】分布式文件系统 FastDFS的原理和安装使用

    本文地址 分享提纲: 1.概述 2. 原理 3. 安装 4. 使用 5. 参考文档 1. 概述 1.1)[常见文件系统] Google了一下,流行的开源分布式文件系统有很多,介绍如下:   -- mo ...

  7. css样式之border-radius

    border-radius 属性设置边框的园角 可能的值:像素,百分比 扩展延伸 html代码 <div></div> css代码 div { height: 200px; w ...

  8. AFNetworking报错"_UTTypeCopyPreferredTagWithClass", referenced from: _AFContentTypeForPathExtens

    问题: 在和Unity交互的过程中,从Unity开发工具打包出来的项目文件,在添加AFNetworking库,运行时报出以下错误: Undefined symbols for architecture ...

  9. Android Butterknife 8.4.0 使用方法总结

    转载请标明出处:http://www.cnblogs.com/zhaoyanjun/p/6016341.html 本文出自[赵彦军的博客] 前言 ButterKnife 简介 ButterKnife是 ...

  10. 非技术1－学期总结&ending 2016

    好久好久没写博客了,感觉动力都不足了--12月只发了一篇博客,好惭愧-- 今天是2016年最后一天,怎么能不写点东西呢!! 学期总结 大学中最关键一年的第一个学期,共4个月.前20天在学网络方面的,当 ...