1.前端js代码
实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<script>
//josn字符串解析为对象
//let json1 = '{"name":"罗","sex":"男","course":["php","java","css"]}';
//let obj = JSON.parse(json1);
//for(key in obj){
// console.log(obj[key]);
//}
//对象解析为josn字符串
//let obj1 = JSON.stringify(obj);
//console.log(obj1);
</script>
<title>ajax-josn</title>
</head>
<body>
<form>
用户名：<input name="account" type="text" /><br />
密码：<input name="password" type="password" /><br />
<button type="button">登录</button>
</form>
<p id="msg"></p>
<script>
let btn = document.getElementsByTagName('button')[0];
btn.onclick = function (){
//1.创建服务器请求对象
let xhr = new XMLHttpRequest();
//2.监听响应状态
xhr.onreadystatechange = function (){
if(xhr.readyState===4) {//请求就绪
if(xhr.status===200){//请求成功
//简单的展示服务器返回的数据
let webJosn = JSON.parse(xhr.responseText);
document.getElementById('msg').innerHTML=webJosn.mass;
if(webJosn.arg==1){//用户名密码正确跳转页面
setTimeout(function(){location.href='index.php'; },2000);
}else if(webJosn.arg==0){ //用户名密码不正确启用登录按钮重新输入提交
btn.disabled=false;//启用按钮
}
}else{
alert('请求失败'+xhr.status);
}
}else{
//服务器正在执行处理中
}
}
//3.设置请求参数
xhr.open('post','login_in.php',true);
//4.设置请求头为表单(post请求时)
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//5.获取用户数据，将json转为字符串
let json = {
account: document.getElementsByName('account')[0].value,
password: document.getElementsByName('password')[0].value,
};
let data = JSON.stringify(json);
//6.发送数据
xhr.send('data='+data);
//7.禁用按钮，防止重复提交
btn.disabled=true;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.PHP处理数据代码
实例
<?php
//print_r($_POST['data']);
//解析json数据
$userinfo = json_decode($_POST['data']);//转为对象
$account=$userinfo->account;
$password=$userinfo->password;
$db = new PDO('mysql:host=127.0.0.1;dbname=test', 'root', 'root', array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES \'utf8\''));
$sql = " SELECT COUNT(*) FROM `userinfo` WHERE `account`='{$account}' AND `password`='{$password}' ";
$stmt=$db->prepare($sql);
$stmt->execute();
if($stmt->fetchColumn(0)==1){
echo json_encode( array('arg'=>1,'mass'=>'登录成功') );
exit;
}else{
echo json_encode( array('arg'=>0,'mass'=>'用户名或者密码错误') );
exit;
}
?>运行实例 »
点击 "运行实例" 按钮查看在线实例
ajax的工作原理是:通过监听服务端的响应，只对部分需要变化的位置做处理，不用重新加载页面，请求少量需要处理的信息，执行更快，通过异步加载的方式，减少与服务器的数据交互量，加快服务器处理速度，且不影响用户体验。目前几乎所有的浏览器都支持，应用比较广泛。
