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>密码: <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 最好用POST
datatype:"TEXT",
//返回值的类型,TEXT,JSON,XML三种类型可选
success:function(data){
//如果ajax执行成功,返回来调用success函数即回调函数,返回值以参数的形式返回 if(data=="OK")
{
window.location="Main.php";
}
else
{
alert(data);
} }, }); })
}); </script> </html>
处理页面的代码
<?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";
}
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>
处理页面
<?php
include("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";
}
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>
综合处理页面
<?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;
}
Ajax方法实现登录页面的更多相关文章
- 拦截$.ajax方法实现登录过期登录
jQuery(function ($) { var CreateLoginWindows = function (callback) { var h = 300; $('#CreateLoginWin ...
- pyppeteer 登录一般网站 并利用 http方法获取登录页面的验证码
主函数 新建浏览器,进行登录,由于验证码的识别准确率不是百分之百,需要多次尝试. async def main(self, username, pwd, url): # 定义main协程函数, log ...
- 重写ajax方法实现异步请求session过期时跳转登录页面
jQuery(function($){ // 备份jquery的ajax方法 var _ajax=$.ajax; // 重写ajax方法, $.ajax=function(opt){ var _suc ...
- 重写ajax方法实现特定情况下跳转登录页面
jQuery(function($){ // 备份jquery的ajax方法 var _ajax=$.ajax; // 重写ajax方法, $.ajax=function(opt){ var _suc ...
- 重写ajax方法实现异步请求session过期时跳转登录页面（转）
一般我们会在过滤器里判断登录状态,如果没登录就跳转登录页面,过滤器java核心代码如下: UserItem loginUser = (UserItem)request.getSession().get ...
- 重写ajax方法实现请求session过期时跳转登录页面
jQuery(function($){ var _ajax=$.ajax; // 备份jquery的ajax方法 $.ajax=function(opt){ var _success = opt &a ...
- ajax Session失效如何跳转到登录页面
在Struts应用中,我们发出的请求都会经过 相应的拦截器进行相关处理,一般都会有一个用户登录拦截(Session失效拦截):一般请求的话,如果Session失效时,我们会跳到登录页面,可是如果我们采 ...
- session过期，拦截ajax请求并跳转登录页面
1.方法一 :1.1使用filter 和ajaxsetup 对ajax进行拦截并跳转登录页面 public void doFilter(ServletRequest request, ServletR ...
- ajax前置处理实现异步请求session过期时跳转登录页面
第一篇博文,mark一下zhq[0]. 问题描述:用户页面,当session过期或都session注销后,普通页面后端都会有过滤器,session过期Redirect到登录页面,但是ajax请求后端只 ...
随机推荐
- fushioncharts的使用教程
FusionCharts 是使用javascript 实现统计图表的js组件:其官网地址:http://www.fusioncharts.com.其早期版本FusionCharts Free 是基于f ...
- IE和主流浏览器
1.添加事件 addEventListener 主流 attachEvent IE 2.移除事件 removeEventListener detachEvent 3.获取事件对象 event ...
- Mybatis 学习-3
1.设计Dao接口 public interface UserDao { public boolean addUser(User user); } public interface CategoryD ...
- 164. Maximum Gap *HARD* -- 无序数组找出排序后连续元素的最大间隔
Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...
- iOS的常见文件及程序的启动原理
一. iOS中常见文件 (一). Xcode6之前 创建项目,默认可以看见一个存放框架的文件夹 info文件以工程文件名开头,如:第一个项目-Info.plist 项目中默认有一个PCH文件 (二). ...
- maven install 时提示“程序包 javax.crypto不存在”
但是javax.crypto是在jdk的jre\lib目录下的 解决方案: <compilerArguments> <bootclasspath>${java.home}/li ...
- MySQL索引实现
摘自:http://blog.codinglabs.org/articles/theory-of-mysql-index.html 在MySQL中,索引属于存储引擎级别的概念,不同存储引擎对索引的实现 ...
- [原创]VM虚拟机安装centos6.4详细图文教程
1.启动虚拟机,新建虚拟机. 2.选择从镜像安装,选择centos6.4的路径. 3.设置用户名和密码.注:只能用小写字母. 4.选择安装路径. 5.配置磁盘大小. 6.准备创建. 如果需要自定义 ...
- 查询使用NoLock
当我们在操作数据库的时候,无论是查询还是修改数据库的操作我们都习惯使用using(var db=new XXXDB()){},但是如果仅仅是做查询,最好是使用NoLock,因为NoLock使用的是共享 ...
- 国内HTML5前端开发框架汇总
国内HTML5前端开发框架汇总 Dawei Cheng 程大伟... 于 星期日, 02/12/2012 - 20:53 提交 国外很有多优秀的HTML5前端开发框架相信大家都耳熟能详:JQuery ...