Chinaunix首页 | 论坛 | 博客

甜心183的ChinaUnix博客

首页　| 　博文目录　| 　关于我

甜心183

  • 博客访问： 113794
  • 博文数量： 40
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 423
  • 用 户 组： 普通用户
  • 注册时间： 2013-01-15 11:55
文章分类

全部博文（40）

文章存档

2016年（36）

2015年（2）

2013年（2）

我的朋友
最近访客
推荐博文
Ajax与服务器通信：发送请求和处理响应

分类： JavaScript

2016-03-11 16:45:13

用原生js的ajax实现用户登录的前后台代码
前台代码

点击(此处)折叠或打开

  1. <!DOCTYPE html >
  2. <html>
  3.  <head>
  4.     <title>task</title>
  5.     </head>
  6.     <body>
  7.      <p><label>用户名</label><input type="text" id="username"/></p>
  8.      <p><label>密码</label><input type="password" id="password"/></p>
  9.      <p><input type="submit" value="submit" onclick="doRequestUsingPOST()"/></p>
  10.     </body>
  11. </html>
  12. <script language="javascript" type="text/javascript">
  13. //创建一个XMLHttpRequest对象
  14.       var xmlHttp;
  15.      function createXMLHttpRequest(){
  16.       if(window.ActiveXObject)
  17.       {
  18.          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  19.       }
  20.       else if(window.XMLHttpRequest)
  21.       {
  22.         xmlHttp = new XMLHttpRequest();
  23.       }else{
  24.      alert("浏览器不支持XMLHttpRequest对象");
  25.      }
  26.     }
  27.     //拼接请求参数
  28. function createQueryString(){
  29.   var username = document.getElementById("username").value;
  30.   var password = document.getElementById("password").value;
  31.   var queryString = "username="+username+"&password="+password;
  32.   return queryString;
  33. }
  34. //开始一个请求
  35. function doRequestUsingPOST(){
  36.    createXMLHttpRequest();
  37.    var url = "dologin.php";
  38.    var queryString = createQueryString();
  39.    xmlHttp.open("POST",url,true);
  40.    xmlHttp.onreadystatechange = handleStateChange;
  41.    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
  42.    xmlHttp.send(queryString);
  43. }
  44. function handleStateChange(){
  45. if(xmlHttp.readyState == 4){
  46.     if(xmlHttp.status == 200){
  47.      console.log(xmlHttp.responseText);
  48.      if(xmlHttp.responseText == "ok"){
  49.      alert("ok");
  50.      }else{
  51.      alert("error");
  52.      }
  53.     }
  54.    }
  55. }

  57. </script>
后台代码dologin.php

点击(此处)折叠或打开

  1. <?php
  2. session_start();
  3. if($_POST['username']&&$_POST['password']){
  4.     $name = $_POST['username'];
  5.     $pass = $_POST['password'];
  6.     if($name=='ella' && $pass = 'pass'){
  7.     
  8.          echo "ok";
  9.      
  10.     }else{
  11.         echo "error";
  12.     }
  13. }else{
  14.     echo 'error';
  15.     exit;
  16. }
  17. ?>
写个demo运行吧

阅读(1209) | 评论(0) | 转发(0) |
0

上一篇：使用Extjs，jquery，javascript进行ajax请求实例分析

下一篇：jquery的ajaxdemo

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6