jQuery Pdo编写登录登录界面

时间：2021-09-08 来源：互联网编辑：宝哥软件园浏览：次

Jquery是继prototype之后的又一个优秀的Javascript库。这是一个轻量级的js库。有两个版本的jQuery可供下载：一个是简化的，另一个是未压缩的(用于调试或读取)。这两个版本都可以从jQuery.com下载。因此，建议使用压缩的。

当然，除了直接下载jquery.js文件外，还可以在加载网页时，将谷歌或微软的CDN插入到html头部，直接从互联网获取库文件支持。

使用谷歌的CDN:

head script type=' text/JavaScript ' src=' http :3358 Ajax . googleapis.com/Ajax/libs/jquery/1 . 4 . 0/jquery . min . js '/script/head使用微软的CDN:

复制代码如下： strong style=' font-family : verdana，arial，Helvetica，无衬线；线高： 18px；/strong p style=' margin-top : 12px；边距-底部： 0px；color: rgb(51，51，51)；线高： 18px；font-family: Verdana，Arial，Helvetica，无衬线；display:内联！重要；背景-颜色： rgb(249，249，249)；'/ppre name=' code ' class=' html ' style=' color : RGB(51，51，51)；font-weight:粗体；线高： 24px；display:内联！“重要，”head脚本类型=' text/JavaScript ' src=' http :http://Ajax . Microsoft.com/Ajax/jquery/jquery-1.4 . min . js '/script/head

但是最好直接下载到自己的项目中，否则会出现网络问题，无法提供支持。

Pdo用来代替Mysql或mysql处理数据库。

只需在php.ini文件中删除即可；扩展名=php_pdo.等等。关于pdo的评论。同时从php5开始，php默认打开pdo驱动，所以在php.ini文件中可能看不到php_pdo.dll(这是个人理解或者猜测，网上教程说一定需要一个文件，但我只是把其他所有与pdo相关的注释都留了出来，最后就可以运行了。)

删除注释并保存后，可以运行phpinfo进行测试，可以看到pdo的相关信息。表示配置成功。

在上一篇文章中，使用ajax技术编写了一个登录界面。事实上，你不必费心，你可以试着用Jquery和PDO来写，感受一下。然后我大致研究了一下Jquery，才发现只有一个$POST()函数可以完成我之前写的两页代码(当然！别人已经打包好了，直接调用就行)，但我还是很乐意直接写ajax，这让我对异步有了更深的理解。

好吧，就编码吧。

第一个是登录界面的代码(和上一个没有太大的区别，只是有一些小的改动，但是细节是魔鬼出来的，所以我会尽力的！)

div.css

div . log in { border : 1px solid # a0b1 C4；高度：429 px；宽度width:300px绝对位置：left:1200pxtop: 150px}login.php

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/脚本类型=' text/JavaScript ' src=' http 3360/log in _ jquery/js/jquery-2 . 2 . 1 . js '/脚本//引用Jquery.js文件脚本src=' http ://log in _ jquery/js/click me . js '/脚本//指的是。js文件linkrel='样式表' href='/log in _ jquery/CSS/div . CSS ' type=' text/CSS '/title登录界面/title/Head body style=' text-align : center ' h1登录界面/h1 div class=' log in ' form=' # Method=' post ' name=' my form ' id=' my form ' P用户名：输入类型=' text ' name=' user ' id=' user ' maxlength=' 20 '/P密码

$(文档)。ready(function(){ $('#login '))。单击(function(){ var user=document . getelementbyid(' user ')。价值；var pwd=document . getelementbyid(' pwd ')。价值；If(user==''||pwd=='') {alert('用户名和密码不能为空！')} else {//重点在这里。对比之前写的xmlHttpRequest的代码量，可以看出只有一个//$。post()函数$。post('/log in _ jquery/PHP/check . PHP '，$ ('# myform ')。serialize()，function(msg)})；} });});span style=' font-size :32 px；'$.post()函数，参数格式为：/span

span style=' font-size :32 px；'$.post(url、数据、呼叫、类型)/span

Url是请求页面的地址，数据是传输的数据，回调是响应函数，类型是返回内容的格式，如text/xml。就这段代码而言，url是“/log in _ jquery/PHP/check . PHP”data : $(“# my form”)。serialize()，其中serialize()函数序列化要传输的数据，以便于数据传输。

回调：函数(msg){$('#serverResponse ')。html(msg)；} msg表示服务器返回的数据，然后在函数中进行处理，并使用html()构建id为serverResponse的文本值。

check.php

span style=' font-size :24 px；color: # 330000'？PHP $ mark=0；$ user=$ _ REQUEST[' user ']；$ pwd=$ _ REQUEST[' pwd ']；$ host=' localhost$ dbname=' databaseweb$ dsn=' mysql:host=$ hostdbname=$ dbname '；$ root=' root$mysql_pwd='数据库密码'；尝试{ $pdo=新PDO($dsn，$root，$ MySQL _ pwd)；} catch(PDOException $e) {echo '数据库连接失败'；} $ row _ column=$ PDO-query(' select * from user，其中name='$user '和password=' $ pwd ')；//$row_column是从数据库返回的列表(行)，不能判断为布尔值。//但是我们可以通过列表中对象元素的个数来做布尔判断，其中fetchColumn()函数用来获取如果($ row _ column-fetchColumn()0){ echo '匹配成功的行数！返回；} else { echo ' user。$user。不存在”；返回；} ?/span就check.php文件而言，用PDO代替Mysqli，但这是处理数据库的趋势。学会学习！

顺便说一下，我的界面上没有图片，所以这次我来补一下。

登录界面：