JavaScript 15 Ajax异步登陆
/**
* Created by KING on 2017/11/28.
*/
var g_xhr_ui;
var g_xhr_login;
var g_id;
$(document).ready(function () {
on_init_userinfo();
});
function createXMLHttpRequest() {
var xhr;
if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = null;
}
return xhr;
}
function on_init_userinfo() {
g_xhr_ui = createXMLHttpRequest();
if (g_xhr_ui) {
g_xhr_ui.onreadystatechange = handleStateChangeInit;
g_xhr_ui.open("GET", "json\\userinfo.json", true);
g_xhr_ui.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
g_xhr_ui.send(null);
}
}
function handleStateChangeInit() {
if (g_xhr_ui.readyState == 4) {
if (g_xhr_ui.status == 200) {
var resText = g_xhr_ui.responseText;
console.log("The server response: " + resText);
var jsonObj = JSON.parse(resText);
var len = jsonObj.length;
console.log("json length : " + len);
var v_table = "<table>" + "<caption>客户信息表</caption>" + "<th>No</th>" + "<th>Company</th>" + "<th>WebSite</th>" + "<th>Email</th>" + "<th class='th-oper'>Oper.</th>";
for (let i = 0; i < len; i++) {
let v_tr =
"<tr>" +
"<td>" + jsonObj[i].cid + "</td>" +
"<td>" + jsonObj[i].cname + "</td>" +
"<td>" + jsonObj[i].csite + "</td>" +
"<td>" + jsonObj[i].cemail + "</td>" +
"<td class='td-oper'>" + "<a href='#'>Edit</a>" + "</td>" +
"</tr>";
v_table += v_tr;
}
v_table += "</table>";
document.getElementById("id-div-userinfo").innerHTML = v_table;
}
}
}
function on_login_click(thisid) {
var param;
var p_id = document.getElementById("id-input-login-id").value;
g_id = p_id;
var p_pwd = document.getElementById("id-input-login-pwd").value;
var md5_pwd = $.md5(p_pwd);
param = "id=" + p_id + "&pwd=" + md5_pwd;
g_xhr_login = createXMLHttpRequest();
if (g_xhr_login) {
g_xhr_login.onreadystatechange = handleStateChangeLogin;
g_xhr_login.open("POST", "login.php", true);
g_xhr_login.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
g_xhr_login.send(param);
}
}
function handleStateChangeLogin() {
var vLoginStatus;
if (g_xhr_login.readyState == 4) {
if (g_xhr_login.status == 200) {
var vLoginStatus = g_xhr_login.responseText;
console.log("The server response: " + vLoginStatus);
if (vLoginStatus == "1") {
document.getElementById("id-div-login").hidden = true;
document.getElementById("id-div-login-ok").hidden = false;
document.getElementById("id-div-login-ok").innerHTML =
"id : " + g_id + " <a href='index.html'>Logout</a>";
document.getElementsByClassName('th-oper')[0].style.visibility = "visible";
let o_td_oper = document.getElementsByClassName('td-oper');
let len = o_td_oper.length;
for (let i = 0; i < len; i++)
o_td_oper[i].style.visibility = "visible";
} else {
document.getElementById("id-div-login").hidden = false;
document.getElementById("id-div-login-ok").hidden = true;
document.getElementById("id-input-login-id").value = "";
document.getElementById("id-input-login-pwd").value = "";
}
}
}
}
JavaScript 15 Ajax异步登陆的更多相关文章
- ssm+ajax实现登陆
ssm的搭建见上一章 1.数据协议层 public User selectByLoginnameAndPassword(@Param("loginname")String logi ...
- Javascript与Ajax
不使用jquery来处理ajax请求该怎么做? 首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数 ...
- ajax异步服务器获取时间
1.创建ajax对象 <script type="text/javascript"> //创建AJAX异步对象 function createAJAX(){ var a ...
- python操作三大主流数据库(6)python操作mysql⑥新闻管理后台功能的完善(增、ajax异步删除新闻、改、查)
python操作mysql⑥新闻管理后台功能的完善(增.删.改.查)安装表单验证D:\python\python_mysql_redis_mongodb\version02>pip instal ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- Ajax异步验证登陆或者注册
首先介绍一个不错的学习Ajax的中文网站:http://www.w3school.com.cn/ajax/index.asp AJAX = 异步 JavaScript 和 XML.详细介绍见上面的网址 ...
- Ajax 传统的异步登陆
这是一个传统的异步登陆,利用Ajax实现的,主要代码如下: 客户端代码: var http; function Button1_onclick() { if (window.ActiveXObject ...
- [转] 为什么javascript是单线程的却能让AJAX异步调用?
为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的? function foo() { console.log( 'first' ); ...
- JavaScript、Ajax与jQuery的关系 分类: C1_HTML/JS/JQUERY 2014-07-31 10:15 3388人阅读 评论(0) 收藏
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
随机推荐
- kubeadm安装Kubernetes 1.14最佳实践
前言 Kubernetes作为容器编排工具,简化容器管理,提升工作效率而颇受青睐.很多新手部署Kubernetes由于“上网”问题举步维艰,本文以实战经验详解kubeadm不用“翻墙”部署Kubern ...
- tensorflow开发环境版本组合
记录下各模块的版本 tensorflow 1.15.0 print tf.__version__ cuda 10.0.130 nvcc -v cudnn 7.6.4 ...
- JavaScript将数组转换为链表
JS中将数组转换为链表 /** * 将数组转换为链表 * @param array arr 需要转换的数组 * @param int type 转换的类型,0为单链表,1为循环链表 * @return ...
- 陶陶摘苹果(升级版)P1478_巧妙模拟
如此水的题居然让我绞尽脑汁,我在想我是不是快退役了. 这道题我看见很多解法:贪心,背包,桶排乱七八糟一大堆. 题目 题目描述 又是一年秋季时,陶陶家的苹果树结了 n 个果子.陶陶又跑去摘苹果,这次他有 ...
- Kubernetes label简单使用
# 查看集群中的node节点 # kubectl get nodes NAME STATUS ROLES AGE VERSION server01 Ready <none> 130d v1 ...
- 抽取vs2010安装包中vc++ runtime
写于2015-3-21 16:59 由qq空间转过来,格式有点乱 之前遇到一个问题,c++\cli的程序部署在服务器上面,程序运行后没有反应就退出了,日志管理器中记录两个错误信息分别如下: ...
- centos7添加网卡
centos7添加桥接网卡 1.使用ip a 命令查看是否有新加的网卡 如上图新网卡为ens36,默认分配ip为192.168.3.14 2. 使用nmcli conn 命令查看新网卡的uuid 3. ...
- 剑指offer-面试题58_1-翻转单词顺序-字符串
/* 题目: 输入一个英文句子,翻转单词顺序,但单词内部顺序不变. */ /* 思路: 先翻转整个句子,再将每个单词分别翻转一次. */ #include<iostream> #inclu ...
- Bash脚本编程学习笔记04:测试命令test、状态返回值、位置参数和特殊变量
我自己接触Linux主要是大学学习的Turbolinux --> 根据<鸟哥的Linux私房菜:基础篇>(第三版) --> 马哥的就业班课程.给我的感觉是这些课程对于bash的 ...
- sqlserver数据库重启
停止:net stop mssqlserver 重启:net start mssqlserver