一、 传统Ajax注册登录
html主页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="reg.php" method="post">
用户名: <input type="text" name="username">
<input type="submit" value="注册">
</form>
</body>
</html>
php后台如下:
<?PHP
header("Content-type: text/html; charset=utf-8"); //指定编码
$con = mysql_connect('localhost', 'root', '123456wq'); // 连接数据库
mysql_select_db("testajax"); //连接指定的数据库
mysql_query('set names utf8'); //指定数据库编码
$username = $_POST['username']; //提交数据
$sql = "select * from reg where username = '$username'" ;
$query = mysql_query($sql);
if($query && mysql_num_rows($query)){
echo "<script>alert('已经注册过了')</script>";
echo "<script>history.back()</script>" ; //返回上一个页面
}else{
$sql = "insert into reg(username) values('$username')";
$query = mysql_query($sql);
if($query){
echo "<script>alert('注册成功')</script>";
echo "<script>window.location = 'index.html'</script>";
}
}
?>
这是我刚刚建的数据库,没有设置id是自增长的模式。123是刚刚验证的数据,如果输入welkin会提示已经注册过了,输入其他的则会插入数据表中
二、类github注册登录
当光标移开显示sql查询结果
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="reg.php" method="post">
用户名: <input id="input1" type="text" name="username">
<input type="submit" value="注册">
</form>
<div id="div1"></div>
<script type="text/javascript">
var oInput = document.getElementById('input1');//hhhhh
var oDiv = document.getElementById('div1');
oInput.onblur = function () {
//当光标移开
var xhr = new XMLHttpRequest();
xhr.open('GET', 'reg2.php?username='+encodeURIComponent(this.value),true);
//true为异步发送,同时为value进行编码,使其不出现乱码
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//console.log(xhr.status);
//console.log(xhr.statusText);
if(xhr.status == 200){
var obj = JSON.parse(xhr.responseText);
if(obj.code){
oDiv.innerHTML = obj.message;
}else{
oDiv.innerHTML = obj.message;
}
}
}
};
xhr.send(null);
};
</script>
</body>
</html>
php:
<?php
header("Content-type: text/html; charset=utf-8"); //指定编码
$con = mysql_connect('localhost', 'root', '123456wq'); // 连接数据库
mysql_select_db("testajax"); //连接指定的数据库
mysql_query('set names utf8'); //指定数据库编码
$username = $_GET['username'];
$sql = "select * from reg where username = '$username'";
$query = mysql_query($sql);
if($query && mysql_num_rows($query)){
echo '{"code":0 , "message" : "已经有人注册过啦"}';
}
else{
echo '{"code":1 , "message" : "可以注册"}';
}
?>
三、 post请求
需要设置头信息,即:
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
且在open中的数据拿到send中,并在php中将请求改为post
如果不想改,可以使用REQUSET
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="reg.php" method="post">
用户名: <input id="input1" type="text" name="username">
<input type="submit" value="注册">
</form>
<div id="div1"></div>
<script type="text/javascript">
var oInput = document.getElementById('input1');//hhhhh
var oDiv = document.getElementById('div1');
oInput.onblur = function () {
//当光标移开
var xhr = new XMLHttpRequest();
xhr.open('POST', 'reg2.php',true);
//true为异步发送,同时为value进行编码,使其不出现乱码
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//console.log(xhr.status); //打印状态码
//console.log(xhr.statusText); //打印状态码所对应的信息
if(xhr.status == 200){
var obj = JSON.parse(xhr.responseText);
if(obj.code){
oDiv.innerHTML = obj.message;
}else{
oDiv.innerHTML = obj.message;
}
}
}
};
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('username='+encodeURIComponent(this.value));
};
</script>
</body>
</html>
四、jquery中使用ajax
- 首先引入jquery的包
- $.ajax进行传数据
$.ajax({
url : 'jquery.php',
type : 'POST',
data : {username:"hello"},
dataType : 'json',
async : false, //false为同步
success : function(data){ //xhr.responseText
console.log(data);
//var obj = JSON.parse(data);
//console.log(obj);
},
error : function(err){
console.log(err.status);
console.log(err.statusText);
}
});
php
<?PHP
//echo 'red';
echo '{"color":"red","width":"200px"}';
?>
得到从控制台输出的数据
五、知识点总结
php扩展:
- mysql_fetch_row 数组下标输出
- mysql_fetch_assoc 数组键值方式输出
- mysql_fetch_array 数组整体方式输出
- mysql_fetch_object 对象键值方式输出
JSON_encode($data) === $row -> username
数组键值=== 对象键值