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请求后端只 ...
随机推荐
- div滚动条演示
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...
- 设置pictureBox的边框颜色
private void pictureBox2_Paint(object sender, PaintEventArgs e) { PictureBox p = (PictureBox)sender; ...
- hdu1157 快排
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1157 大意:排序,取中间数. PS:1.自己实现了下快排函数,也可以使用#include<algor ...
- hdu 1421
时隔多日,又回来啃dp... 题意:有n件物品,搬k次,每搬一个消耗的疲劳值为两件物品重量之差的平方,求最小的疲劳消耗 状态转移方程:dp[i][j] = min((dp[i-2][j-1]+(s[i ...
- Qt之QThread（深入理解）
简述 为了让程序尽快响应用户操作,在开发应用程序时经常会使用到线程.对于耗时操作如果不使用线程,UI界面将会长时间处于停滞状态,这种情况是用户非常不愿意看到的,我们可以用线程来解决这个问题. 前面,已 ...
- c++表达式的一些小小的注意事项
3+12>>1 = 7; 12>>1+3 =0; 3+(12>>1)=9;
- kwicks插件学习
/* Kwicks for jQuery (version 1.5.1) Copyright (c) 2008 Jeremy Martin http://www.jeremymartin.name/p ...
- 各种浏览器css hack
转载 http://www.cnblogs.com/jikey/archive/2010/06/21/1761924.html IE都能识别*,标准浏览器(如FF)不能识别*:IE6能识别*,但不能识 ...
- 数据类型转换的三种方式 Convert,parse和TryParse的解析
以Int类型为例,具体说明Convert.ToInt32(object value),int.Parse(object value)和int.TryParse(string s,out int res ...
- 记Judith此人和我对美国教育的感触
我因为及其糟糕的英语所以报读了一个英语学习班,Judith就是我的英语老师,同时我在家学习的大儿子也自然报读了这个学习班也是她的学生. 她很胖,典型的美国形象(哈哈,希望这样不会让她不快),之前在南京 ...