jQuery+Pdo编写login登陆界面_jquery

Jquery是继prototype之后又一个优秀的Javascript库。而且它是轻量级的js库。共有两个版本的 jQuery 可供下载:一份是精简过的,另一份是未压缩的(供调试或阅读)。这两个版本都可从 jQuery.com 下载。所以开发学习建议使用压缩的。

当然啦,除了直接下载jquery.js文件外,还可以在html头中插入Google或者Microsoft的CDN来在网页加载时直接从网上获取库文件支持。

使用 Google 的 CDN:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

使用 Microsoft 的 CDN:

复制代码 代码如下:

<strong style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 18px;"></strong>
<p style="margin-top: 12px; margin-bottom: 0px; color: rgb(51, 51, 51); line-height: 18px; font-family: Verdana, Arial, Helvetica, sans-serif; display: inline !important; background-color: rgb(249, 249, 249);"></p><pre name="code" class="html" style="color: rgb(51, 51, 51); font-weight: bold; line-height: 24px; display: inline !important;"><head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script>
</head>

但是最好是直接下载到自己的工程中来使用,不然有时会存在网络问题而无法提供支持。

Pdo是用来代替Mysql或者mysql等来处理数据库的。

只要在php.ini文件中去掉;extension=php_pdo......等被注释掉的有关pdo的.dll文件。同时从php5开始,php默认打开pdo驱动,所以你可能在php.ini文件中看不到php_pdo.dll(这是个人的理解或者说是猜测,网上教程说一定需要着个文件,但是我只是把其他与pdo相关的所有去注释掉了而已,最后也能运行。)

去掉注释后保存后就可以运行phpinfo来进行测试了之中可以看到有关pdo的相关信息。表示配置成功。

在上一篇文章中已经用ajax技术编写了一个login登陆界面,其实不用这么麻烦,可以试试用Jquery和PDO写写,感受感受。于是就粗略的学习了一下Jquery,这才发现只要一个$POST()函数就可以完成我之前所编写的两页的代码(当然啦!人家的是已经封装做好的,只需直接调用就行了),但是我依然很高兴直接写了ajax,这使我对异步认识的更加深刻。

好了直接上代码。

首先是登陆界面的代码(与之前的没多大的区别,有一些小小改动,但是细节出魔鬼,可以认真到什么程度,我就尽力吧!)

div.css

div.login
{

border: 1px solid #a0b1c4 ;
height:429px;
width:300px;
position: absolute;
left:1200px;
top: 150px;

}

login.php

<!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 " />

<script type="text/javascript" src="/login_Jquery/js/jquery-2.2.1.js"></script> //引用Jquery.js文件<script src="/login_Jquery/js/ClickME.js"></script> //引用自己编写的.js文件<link rel="stylesheet" href="/login_Jquery/css/div.css" type="text/css" />

<title>登陆界面</title>
</head>

<body style=" text-align:center">
 <h1>登陆界面</h1>
 <div class="login" >
 <form action="#" method="post" name="myform" id="myform">
 <p>
 用户名:<input type="text" name="user" id="user" maxlength="20" />
 </p>
 <p>
 密 码:<input type="password" name="pwd" id="pwd" maxlength="20" />
 </p>
 <p>
 <div id="serverResponse"></div>

 </p>

  <img id="login" src="/loginProject/pictrue/login.png" />
 </form>
 </div>
</body>
</html>

 

ClickME.js

$(document).ready(function(){
 $("#login").click(function(){
 var user= document.getElementById("user").value;
 var pwd= document.getElementById("pwd").value;
 if(user==""||pwd=="")
 {
 alert("用户名与密码不能为空!")

 }
 else
 { //重点在这,对比之前写的xmlHttpRequest的代码量可以看到,在这只是调用了一个   //$.post()函数
 $.post(
 "/login_Jquery/php/check.php",
 $("#myform").serialize(),
 function(msg){ $("#serverResponse").html(msg);}
 );

 }
 });
});

<span style="font-size:32px;">$.post()函数,参数格式是:</span> 

<span style="font-size:32px;">$.post(url,data,call ,type)</span>

url是请求页面的地址,data是用传送的数据,callback是响应函数,type是返回内容的格式如text/xml等。就本代码来说,url为"/login_Jquery/php/check.php" data:$("#myform").serialize(),其中serialize()函数是将要传送的数据序列化便于传送数据。

callback:function(msg){$("#serverResponse").html(msg); } msg表示服务器回传的数据,然后在函数中对其进行处理,将其使用html()来内置id为serverResponse的文本值。

check.php

<span style="font-size:24px;color:#330000;"><?php

 $mark=0;
 $user=$_REQUEST['user'];
 $pwd=$_REQUEST['pwd'];

 $host='localhost';
 $dbname='databaseweb';
 $dsn = "mysql:host=$host;dbname=$dbname";
 $root='root';
 $mysql_pwd='数据库密码';
 try
 {
  $pdo = new PDO($dsn, $root, $mysql_pwd);
 }
 catch(PDOException $e)
 {
  echo "数据库连接失败";
 }
 $row_column= $pdo->query("select * from user where name='$user' and password='$pwd' ");

 //$row_column是从数据库传回的list(rows),不能做布尔型的判断。
 //但是我们可以通过list中的object元素的个数来做布尔判断其中fetchColumn()函数用于获取row的个数

 if($row_column->fetchColumn() >0 )
 { echo "匹配成功!";
 return;
 }
 else
 {
 echo "用户".$user."不存在";
 return;
 }

 ?></span>

就check.php文件而言,就是使用了PDO代替了Mysqli而已,但是这是处理数据库的趋势。学学吧!

对了一直没上自己界面的图片,这次补上。

登陆界面:

账户密码为空 alert提醒:

账户密码与数据库异步匹配无误:

账户密码与数据库匹配有误:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, pdo
, 登陆
login
如何使用php编写login、jquery mobile login、jquery login、jquery login 页面、jquery ajax login,以便于您获取更多的相关知识。

时间: 2024-10-03 15:24:10

jQuery+Pdo编写login登陆界面_jquery的相关文章

语言课程设计-用vc6.0编写一个登陆界面,求大神

问题描述 用vc6.0编写一个登陆界面,求大神 用户名与密码写在代码里 密码输入三次自动退出 并且登陆成功后可以运行九九乘法表这个小程序 谢谢各位大神 解决方案 还没说使用什么编程语言呢 解决方案二: MFC or WIN32? CLoginDIalog; CDIalog { private: int login_count; ..... 看看MFC的实现 } 解决方案三: 用VC6的对话框模板工程建立,然后就是两个EDIT 控件分别放用户名,密码 输入后,GetWindowText获取,然后比

jQuery插件编写步骤详解_jquery

本文实例讲述了jQuery插件编写步骤.分享给大家供大家参考,具体如下: 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第 三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下 面就是一个简单扩展Jquery

jquery+javascript编写国籍控件_jquery

一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家. 主要功能和界面介绍 国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍 国籍控件核心是两个文件,navtionality.js 和 mian.css.navtionality.js主要功能是国籍控件的DOM构建以及相应的事件绑定:main.css主要是用于渲染国籍控件的样式.而main.js是国籍控件的调用方法. HTML结构 国籍控件要呈现在页面上,必须事先在页面中加以设置以供控件加载使用.control-nat

新手请教:vb08 编写登陆界面后与数据库连接,再提交留言 怎么在数据库中更新?

问题描述 小弟现在用vb08编写了一个登陆界面(form1)并且已经和数据库连在一起现在登陆后弹出留言界面(form2)在这个界面中留言提交后怎么在form2的代码中引用form1的用户名把用户名和留言内容一起更新到表中请问有几种实现方式???新手请教,谢谢各位大哥 解决方案 解决方案二:定义一个curUser公共变量解决方案三:该回复于2011-12-19 13:53:28被版主删除解决方案四:Form1中定義一個static類變量,於Form2中調用例:'Form1中:dimusername

jQuery UI结合Ajax创建可定制的Web界面_jquery

如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚至也整合了类似的功能.jQuery 库简化了此类复杂 JavaScript 交互的编写,随着 jQuery UI 的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型. 本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可

基于jquery插件编写countdown计时器_jquery

废话不多说,直接上代码: 先展示一下插件调用方式:  1. 需要先加载countdown插件对应的css文件,也就几行代码而已,可以不用引入,自己手写一样啦  <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jquery countdown倒计时

asp.net做的登录后总是跳回登陆界面

问题描述 asp.net做的登录后总是跳回登陆界面 登录代码: <div id="loginButton"> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/login.gif" OnClick="ImageButton1_Click" /> <asp:ImageButton ID="

javascript引擎-用javascript编写一个登陆的页面,求代码 ,急求!!

问题描述 用javascript编写一个登陆的页面,求代码 ,急求!! 像是这样的:function request(paras){//获取url参数 var url=location.href; var paraString=url.substring(url.indexOf("?")+1,url.length).split("&"); var paraObj={}; for (i=0; j=paraString[i]; i++)paraObj[j.sub

求登陆界面连接数据库办法!!

问题描述 如题:求登陆界面连接数据库办法!!我要弄个登陆界面,自己新建了个数据库,怎么样写代码让登陆界面验证数据库里的账号密码是否一致 解决方案 解决方案二:你是不是指只有授权的用户才能连接数据库?还是只有授权的用户才能访问数据库?以下是个人意见,仅供参考.以SQLServer为例,因为不同的认证模式,有不同的处理方法:1.SQLServer用户认证模式下,读取登录界面输入的用户名和密码,然后生成SQLServer连接串,尝试SqlDataConnection.Open(),由SQLServer