使用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. 从RPC开始（一）

    这是一篇关于纯C++RPC框架的文章.所以,我们先看看,我们有什么? 1.一个什么都能干的C++.(前提是,你什么都干了) 2.原始的Socket接口,还是C API.还得自己去二次封装... 3.C ...

  2. C语言 · Torry的困惑(基本型)

    问题描述 Torry从小喜爱数学.一天,老师告诉他,像2.3.5.7--这样的数叫做质数.Torry突然想到一个问题,前10.100.1000.10000--个质数的乘积是多少呢?他把这个问题告诉老师 ...

  3. 散列表(hash table)——算法导论(13)

    1. 引言 许多应用都需要动态集合结构,它至少需要支持Insert,search和delete字典操作.散列表(hash table)是实现字典操作的一种有效的数据结构. 2. 直接寻址表 在介绍散列 ...

  4. ASP.NET Core project.json imports 是什么意思？

    示例代码: "frameworks": { "netcoreapp1.0.0": { "imports" : "portable- ...

  5. 最长回文子串-LeetCode 5 Longest Palindromic Substring

    题目描述 Given a string S, find the longest palindromic substring in S. You may assume that the maximum ...

  6. MyBatis基础入门--知识点总结

    对原生态jdbc程序的问题总结 下面是一个传统的jdbc连接oracle数据库的标准代码: public static void main(String[] args) throws Exceptio ...

  7. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  8. LoadRunner函数百科叒叒叒更新了！

    首先要沉痛通知每周四固定栏目[学霸君]由于小编外派公干,本周暂停. 那么这周就由云层君来顶替了,当然要要说下自己做的内容啦,DuangDuang! <LoadRunner函数百科>更新通知 ...

  9. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  10. 纸箱堆叠 bzoj 2253

    纸箱堆叠 (1s 128MB) box [问题描述] P 工厂是一个生产纸箱的工厂.纸箱生产线在人工输入三个参数 n, p, a 之后,即可自动化生产三边边长为 (a mod P, a^2 mod p ...