用ajax技术编写login登陆界面

来源：互联网发布：mac室内三维建模软件编辑：程序博客网时间：2024/06/05 03:46

</pre></div>      一开始跟老师学习，老师就要求写一个login界面，当时暗地里一想这也太简单了吧！但当老师一说要用到什么技术..... 。我一下子就惊呆了，原来小小的登陆界面也需要有这么多的技术去支持。</h1><div> <span style="font-size:24px">从易到难，我决定先不做很花俏的界面，先做的有技术了，目标两点：1.图片点击事件触发提交；2.在登陆界面上进行异步检测；3.数据库账户密码验证。</span></div><div><span style="font-size:24px"></span></div><div><span style="font-size:24px">先上登陆界面的代码</span></div><div><span style="font-size:24px"></span><pre name="code" class="css" style="font-size: 24px; font-weight: bold;">div.login{border: 1px  solid  #a0b1c4  ;height:429px;width:300px;position: absolute;left:1200px;top: 150px; }

<span style="font-size:24px;"></pre><pre name="code" class="php"><span style="font-size:24px;"><!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 " /><link rel="stylesheet" href="/loginProject/css/div.css" type="text/css"  /><script  src="/loginProject/js/ClickME.js"></script><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" onclick="ClickME()"  />             <!--/a -->    </form> </div> </body></html></span></span>

.css文件

div.login{border: 1px  solid  #a0b1c4  ;height:429px;width:300px;position: absolute;left:1200px;top: 150px;}

其中一些html元素，采用了css文件作为外部样式，所以需要在<head></head>之间插入.css文件的路径方便随页面加载时一起加载。 onclick 是Javascript中点击事件，一旦指定的元素被点击，则会触发在外部文件中ClickME.js中定义的ClickME()函数

var xmlHttp;   //在js文件中定义了一个全局对象变量function CreateXMLHttpRequest() //在ajax时我们需要一个异步的对象来帮我们完成发送请求，数据，反馈的回传等工作。

{                              //由于不同的服务采用的对象不同，所以我们需要进行判别当前的浏览器  是支持那种异步请求对象          if (window.XMLHttpRequest) //最终我们把支持的异步对象赋给xmlHttp这一全局变量。方便我们进行操作  {     xmlHttp=new XMLHttpRequest();  }    else if (window.ActiveXObject)  {        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }function createQueryString()//这个函数主要起到的作用是获取登陆界面提交的账户密码，并且以特定传送                              格式发送出去{    var user= document.getElementById("user").value;  var pwd= document.getElementById("pwd").value;   var queryString="user="+user+"&pwd="+pwd;  //这是发送值的格式要求 "名=值" 相邻元素用"&"隔开。    return queryString;}function doRequestUsingPost(){   CreateXMLHttpRequest();  var url="/loginProject/php/check.php";//声明服务器的地址  var queryString=createQueryString(); //生成要传送的数据，即账号密码。  xmlHttp.open("POST",url,true);       //开始异步，此时readystate为1  xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");//设置请求头，照                                                                              //抄就行  xmlHttp.send(queryString);        //开始发送请求  xmlHttp.onreadystatechange=handleStateChange;//设置句柄，通过回调函数来接收服务器的反馈。  } function handleStateChange()  //回调函数，等待服务器的响应{          if(xmlHttp.readyState==4)  //readystate==4时，代表已经接收到来至服务器的信息。      {             var responseDiv= document.getElementById("serverResponse"); if(responseDiv.hasChildNodes())     {    responseDiv.removeChild(responseDiv.childNodes[0]); }    var responseText=document.createTextNode(xmlHttp.responseText);    responseDiv.appendChild(responseText);   //将服务器的响应赋给页面元素 serverResponse

<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255);">}}function ClickME(){ var user= document.getElementById("user").value; //通过js获取页面元素的值var pwd= document.getElementById("pwd").value;if(user==""||pwd=="") //初步检测账号密码是否为空，没有进行更加严谨的格式检测{ alert("用户名与密码不能为空！")//如为空则弹出一个窗口提醒 }else //要是都不为空则开始将账号密码异步发送到指定服务器上进行相应的验证。 { doRequestUsingPost(); //调用发送请求函数，由于要不换页面异步处理，所采用原始的方法</span>

       }                        //采用用ajax技术}

服务器响应代码：check.php

<?php       header('Content-type:text/html;charset=utf-8');   $mark=0;   $user=$_REQUEST['user'];   $pwd=$_REQUEST['pwd'];  //通过<span style="font-family: Arial, Helvetica, sans-serif;">$_REQUEST获取传送到服务器上的账号                                                           // 密码</span>          $mysql_server_name='localhost';       $mysql_username='root';       $mysql_password='你的mysql密码';       $mysql_database='数据库名';       $mysqli=new mysqli($mysql_server_name,$mysql_username,$mysql_password,$mysql_database);//连接数据库。       if (!$mysqli)       {          die('Could not connect: ' .  mysqli_connect_error());       }          $sql= "select * from user";          $result = $mysqli->query($sql); //查询数据          while($row = $result->fetch_array())  //进行遍历  {         if($user==$row[1] && $pwd==$row[2] )     {          $mark=1;   break;     }  }             if($mark==1)  echo "匹配成功！";  else      echo $user."用户不存在！"; ?>

1 0