jQuery+Pdo编写login登陆界面

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提醒：

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

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

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

赞 (0)

相关推荐

  • ExtJs 表单提交登陆实现代码

    1 在子类中添加单击提交事件 复制代码 代码如下: //登陆按钮单击事件 loginFun: function() { var f = Ext.getCmp("loginForm"); //表单验证 if (f.form.isValid) { f.form.submit({ waitTitle: "请稍候", waitMsg: '正在登陆...', url: 'http://www.cnblogs.com/Service/SystemService/SystemSe

  • jQuery的cookie插件实现保存用户登陆信息

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>cookies.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this i

  • httpclient模拟登陆具体实现(使用js设置cookie)

    httpclient模拟登陆(使用js设置cookie) 复制代码 代码如下: <html> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> <link rel=stylesheet type=text/css href='/bbs.css'> <script>document.cookie='utmpnum=51;path=/;domain=.' + window.l

  • 将jQuery应用于login页面的问题及解决

    最近在学习和试用jquery,感觉它的ajax和ashx发回json简直是完美的结合,如果我们可以在Form验证时使用这种方式,则login页面几乎就可以达到简洁的极致了.在login页面中使用jquery的ajax回叫ashx验证用户名和密码,然后转向其他页面.初步验证,在ashx中手工构造登录票据,然后返回给login端,是可以完成登录的. 然后接下来,就是在login.aspx页面中引入jquery,将jquery放在lib目录下,将user.ashx放在services目录下,在logi

  • Jsp中解决session过期跳转到登陆页面并跳出iframe框架的方法

    当session过期后可以用过滤器来设置重定向页面 复制代码 代码如下: public class ActionFilter extends HttpServlet implements Filter {private FilterConfig filterConfig;public void init(FilterConfig config) {this.filterConfig = config;}public void doFilter(ServletRequest servletRequ

  • JS简单实现登陆验证附效果图

    JS简单实现登陆验证附效果图

    源代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312

  • jquery实现界面无刷新加载登陆注册

    jquery实现界面无刷新加载登陆注册

    官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成 贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击!当然样式丑了一些!还请见谅!demo在下面 1这里是html内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

  • 使用jQuery插件创建常规模态窗口登陆效果

    使用jQuery插件创建常规模态窗口登陆效果

     隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单.在博客和杂志网站也适用于与主网站分开的作者登陆页面,模态窗口比在JavaScript中创建新窗口更容易,因为使用HTML标记显示,所有 的东西能都呈现在同一个窗口中. 我将演示如何利用jQuery插件leanModal建立一个常规模态窗口.如果你有MIT general license,那么这个插件是完全开源和免费的,我很喜欢这个插件,用起来相当

  • struts2+jquery实现ajax登陆实例详解

    文本仪一个实例讲述了struts2+jquery实现ajax登陆的实现方法,具体步骤如下: 一.新建一个web项目,取名test.配置好struts2的环境,并导入Jquery的js文件到该项目. 二.在com.action包下,新建一个loginAction.java loginAction.java的代码如下 package com.action; import org.apache.struts2.convention.annotation.Action; import org.apach

  • jQuery登陆判断简单实现代码

    复制代码 代码如下: <script src="jquery-1.9.1.js"></script> <script type="text/javascript"> $('#txtUserName').focus(function () { $('#txtUserName').val(''); }) $('#txtPassWord').focus(function () { $('#txtPassWord').val(''); }

随机推荐