Ajax方法实现登录页面

Note:

ajax技术
不用刷新页面,做局部刷新
不用form表单,因为不需要提交,通过JQuery控制
必须要有id
如果要用ajax可以用JQuery也可以用js写,
推荐JQuery 因为简单,直接引入JQuery包
js和JQuery是不能操作数据库的,如果需要处理数据库还需要用php语言

JQuery中不能直接嵌php代码,所以需要创建一个新的页面来写php代码
JQuery里面就需要传递数据过去,提交到php页面处理

1.输入用户名,密码后点击登录.输入正确跳转页面,输入错误出现提示对话框

登录页面的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.11.2.min.js"></script>
</head>
<body><h1>登录</h1>
<div>用户名:<input type="text" id="uid" ></input></div>
<div>密码:&nbsp;<input type="text" id="pwd" ></input></div>
<div><input type="button" value="登录" id="btn"></input></div></body><!--用JQuery写ajax jquery是不能直接处理数据库的--><script type="text/javascript">$(document).ready(function(e){$("#btn").click(function(){var uid = $("#uid").val();var pwd = $("#pwd").val();$.ajax({
//必须要写的四个参数,顺序不限url:"cli.php",//处理页面的路径data:{u:uid,p:pwd},//传递的数据.提交数一般以json格式来写,key是自定义的,:后面的值 就是上面的值type:"POST",//数据的提交传递方式,GET,POST 最好用POSTdatatype:"TEXT",//返回值的类型,TEXT,JSON,XML三种类型可选success:function(data){//如果ajax执行成功,返回来调用success函数即回调函数,返回值以参数的形式返回if(data=="OK"){window.location="Main.php";}else{alert(data);}},});})});</script></html>

View Code

处理页面的代码

<?php
//做ajax的处理页面,要顶格写<?php,不要空行,因为如果返回的是text,空一行的话,返回的结果不正确会带空格include("DBDA.php");$db = new DBDA();
$uid = $_POST["u"];//接收用户名
$pwd = $_POST["p"];//密码$sql = "select count(*) from login where username='{$uid}' and password='{$pwd}'";$attr = $db->Query($sql);if($attr[0][0]==0)
{echo "用户名密码不正确!";
}
else
{echo "OK";
}

View Code

2.输入用户名后判断是否存在

主页面代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div><input type="text" id="user" /><div id="ts"></div></div>
</body><script>$("#user").blur(function(){var uid = $(this).val();$.ajax({url:"chuli.php",data:{u:uid},dataType:"TEXT",success: function(d){if(d=="OK"){$("#ts").html("用户名可用");}else{$("#ts").html("<span style='color:red'>该用户名已存在!</span>")}}})});</script></html>

View Code

处理页面

<?phpinclude("DBDA.php");
$uid = $_POST["u"];
$sql = "select count(*) from login where username='{$uid}'";
$attr = $db->Query($sql);if($attr[0][0] == 0)
{echo "OK";
}
else
{echo "NO";
}

View Code

3.点击出现按钮,出现下拉菜单,处理时综合以上两种写到同一处理页面

查询页面

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../../jquery-1.11.2.min.js"></script>
</head><body>
<div>
<select id="sel">
</select>
</div><br /><input type="button" id="btn" value="出现" />
</body><script type="text/javascript">
$(document).ready(function(e) {$("#btn").click(function(){$.ajax({url:"chuli.php",data:{type:2},type:"POST",datetype:"TEXT",success: function(data){var hang = data.split("|");var str = "";for(var i=0;i<hang.length;i++){var lie = hang[i].split("^");str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";}$("#sel").html(str);}})})
});</script></html>

View Code

综合处理页面

<?php$type = $_POST["type"];
include("../../DBDAajax.php");//include("../../DBDA.php");
$db = new DBDAajax();switch($type)
{case 0:$uid = $_POST["u"];$pwd = $_POST["p"];    $sql = "select count(*) from login where username='{$uid}' and password='{$pwd}'";$attr = $db->Query($sql);if($attr[0][0] == 0){echo "用户密码不正确!";}else{echo "OK";}break;case 1:$uid = $_POST["u"];$sql = "select count(*) from login where username='{$uid}'";$attr = $db->Query($sql);if($attr[0][0] == 0){echo "OK";}else{echo "NO";}    break;case 2:$sql = "select * from Nation";$attr = $db->Ajax($sql);echo $attr;//将数组拼成字符串/*            $str = "";for($i=0;$i<count($attr);$i++){for($j=0;$j<count($attr[$i]);$j++){$str = $str.$attr[$i][$j];$str = $str."^";}$str = substr($str,0,strlen($str)-1);    $str = $str."|";}$str = substr($str,0,strlen($str)-1);    echo $str."<br>";*/break;
}

View Code

转载于:https://www.cnblogs.com/sjxx/p/5361676.html

Ajax方法实现登录页面相关推荐

用php mui ajax注册登录页面,ajax实现简单登录页面
本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下一.什么是ajax Ajax是一种无需重新加载整个网页,能够更新部分网页的技术. 二.ajax的工作原理 Ajax工作 ...
如何用ajax做登录页面,ajax如何制作登录页面？登录页面ajax的请求详解（附完整实例）...
本篇文章主要的讲述了关于ajax登录页面时ajax请求的内容,现在我们一起来看看这篇文章吧登录页面ajax请求一.登录验证提示信息//提交登录信息sub.on('click',function(e ...
HBuilderX uni-app简单实现静态登录页面（实例）
本章用到......uni-app页面跳转uni.navigateTo方法.uni.navigateBack方法.uni-app简单实现邮箱验证码发送点击后读秒样式.登录账号.密码正则表达式验证等适 ...
Ajax Session失效跳转登录页面的方法
在Struts应用中,我们发出的请求都会经过相应的拦截器进行相关处理,一般都会有一个用户登录拦截(Session失效拦截):一般请求的话,如果Session失效时,我们会跳到登录页面,可是如果我们采 ...
mvc3中正确处理ajax访问需要登录的页面
mvc3中有Ajax.ActionLink和Ajax.BeginForm两个方法用来生成ajax的连接和ajax的表单提交. 但是当要访问的连接是一个需要登录的页面,显示时就不太友好了我简单模拟了一 ...
用session实现html登录页面跳转页面跳转页面跳转,js判断登录与否并确定跳转页面的方法...
这篇文章主要介绍了js判断登录与否并确定跳转页面的方法,涉及Ajax及session使用的技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了js判断登录与否并确定跳转页面的方法.分享给大家供 ...
session会话拦截ajax,session过期，拦截ajax请求并跳转登录页面
1.方法一 :1.1使用filter 和ajaxsetup 对ajax进行拦截并跳转登录页面 public void doFilter(ServletRequest request, ServletR ...
怎么在html显示已登录状态,jQuery Ajax 实现在html页面实时显示用户登录状态
当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定I ...
html js验证登录页面,js判断登录与否并确定跳转页面的方法
本文实例讲述了js判断登录与否并确定@R_384_404@面的方法.分享给大家供大家参考.具体如下: 使用session存储,确定用户是否登录,从而确定页面跳转至哪个页面. 判断本地有无custome ...
CAS客户端使用Ajax登陆（即保留原有客户端登录页面）
前言因为对项目的不熟悉,在使用CAS的时候,踩了蛮多的坑,前面的文章提到了怎么跟shiro集成,可以说是花了比较多的时间.而实际的需求却不止于此.公司希望保留原有应用的登录页面.这个可又是一 ...

Ajax方法实现登录页面

Ajax方法实现登录页面相关推荐

最新文章

热门文章