关闭

AJAX操作03_封装ajax.js模拟用户登录

标签: ajax.jsAJAX用户登录
438人阅读 评论(0) 收藏 举报
分类:

本文分享一下ajax方法的封装和利用ajax.js模拟用户登录

1.ajax方法的封装

从此文http://blog.csdn.net/weixin_36185028/article/details/53934050中可知ajax的本质就是使用XMLHttpRequest()方法实现数据的异步加载,总共分为五步,分别为创建一个XMLHttpRequest请求对象、Open()方法传入请求方式和请求地址、send()方法发送请求数据、监听服务器响应onreadystatechange、获取及处理数据。

整个异步加载过程传输的参数有:请求方式,请求地址,发送的数据,对于请求到的数据,一般都需要进行处理,因此还要有一个回调函数用来处理请求到的数据。

对以上的方法可封装成一个ajax方法,便于以后直接调用

//method:请求方式,url:请求路径,json:发送的数据,cb:回调函数
function ajax(method,url,json,cb){
	//处理浏览器兼容
	if (window.XMLHttpRequest) {
		var xmlhttp = new XMLHttpRequest();
	}else{
		var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");			
	}
	// 将发送的数据转化为数组并拼接成字符串,如{name:"abc",age:18}转name=abc&age=18
	var arr = [];
	for(var key in json){
		var str = key + "=" +json[key];
		arr.push(str);
	}
	var str = arr.join("&");//"name=abc&age=18"
	//请求方式
	if (method=="get") {
		xmlhttp.open("get",url+"?"+str);
		xmlhttp.send();
	}else{
		xmlhttp.open("post",url);
		xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
		xmlhttp.send(str);
	}
	//监听数据库响应
	xmlhttp.onreadystatechange = function(){
		if (xmlhttp.readyState==4&&xmlhttp.status==200) {				
			cb(xmlhttp.responseText);
		}
	}
}

2.ajax.js的调用模拟用户登录

以一个模拟登录为例,在数据库html5-7中已经预先存放了用户的账户和密码,如下所示



其中pwd表示密码,经过了md5加密

Html文件包括了用户登录视图界面和调用ajax.js方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	账户:<input type=text" class="nam" ><br>
	密码:<input type="password" class="pwd"><br>
	<input type="submit" class="btn">
<p></p>
</body>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
		var nam = document.querySelector(".nam");
		var pwd = document.querySelector('.pwd');
		var btn = document.querySelector('.btn');
		var p = document.querySelector('p');
		//点击登录
		btn.onclick = function(){
			//调用ajax.js
			ajax("post","post2.php",{name:nam.value,pwd:pwd.value},function (data) {
				p.innerHTML = nam.value +","+ data;
				nam.value = "";//清空帐号
				pwd.value = "";//清空密码
			})
	}
</script>
</html>

Php文件用于将用户数据的帐号和密码放在数据库中比对,并返回一个结果

<?php
$conn = @mysqli_connect("localhost","root","","html5-7");
if (!$conn) {
    die("连接失败!");
}
$conn->query("set names utf8");//读取数据库格式
$name = $_POST['name'];
$pwd = md5($_POST['pwd']);//用户输入密码转化为md5格式
$sql = "SELECT * FROM user WHERE name = '{$name}' AND pwd ='{$pwd}'";
$conn->query($sql);
//判断登录是否成功
if(mysqli_affected_rows($conn)>0){
    echo "登陆成功";
}else {
    echo "登陆失败,账号或密码错误";
}
?>
查看效果:



1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:92872次
    • 积分:2747
    • 等级:
    • 排名:第13801名
    • 原创:171篇
    • 转载:46篇
    • 译文:4篇
    • 评论:23条
    博客专栏
    最新评论