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请求后端只 ...
随机推荐
- form in drupal
qin_form_ajax_example_form($form, &$form_state)类似函数的参数永远都是一样的,最多把$form前面也加上& 当没有实现页面跳转时,$for ...
- 笔记 《Effective Objective-C 2.0：编写高质量iOS与OS X代码的52个有效方法 》
阅读此书的笔记点: 此书目录即是对知识点最好的总结 第1章 熟悉Objective-C ---------------------------------------------- 第1条:了解Obj ...
- JSONObject和JSONArray使用
1.所依赖JAR包 要使程序可以运行必须引入JSON-lib包,JSON-lib包同时依赖于以下的JAR包: commons-lang.jar commons-beanutils.jar common ...
- 【bzoj1059】矩形游戏
题意 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏--矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作:行交换操作 ...
- android AutoCompleteTextView 自定义BaseAdapter
最近项目中需要做搜索功能,实现类似 Google.Baidu 搜索的 下拉提示效果.Android为我们提供了 AutoCompleteTextView 控件来完成此功能. 网上好多例子都是简单使用 ...
- [svn] 分支开发
参考博客: http://www.cnblogs.com/cxd4321/archive/2012/07/12/2588110.html (1)为什么要使用SVN分支开发和主干合并? 目的:在SVN下 ...
- poj------(3468)A Simple Problem with Integers(区间更新)
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 60745 ...
- Andriod使用webview控件往APP里内嵌网页
转自博文:http://www.cnblogs.com/JuneZhang/p/4148542.html 1.布局文件片段:res-layout <WebView android:id=&quo ...
- 给Eclipse中hibernate.cfg.xml配置文件加提示
在hibernate框架需要的jar包中找到hibernate3.jar,并用压缩软件打开,如图: 2 选择org文件夹--打开下一级文件夹 3 点击类型,方便找到dtd文件,下拉查看dtd文件,有两 ...
- Druid：一个用于大数据实时处理的开源分布式系统
Druid是一个用于大数据实时查询和分析的高容错.高性能开源分布式系统,旨在快速处理大规模的数据,并能够实现快速查询和分析.尤其是当发生代码部署.机器故障以及其他产品系统遇到宕机等情况时,Druid仍 ...