学习了JSON的格式转换，利用ajax异步发送信息到后端php的整个过程。
以及读取json文件的方法。
作业1、读取json文件内容显示到前端页面
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>测试读取json文件</title>
</head>
<body>
<button>读取后端数据</button>
<p></p>
<script>
var btn = document.getElementsByTagName('button').item(0);
var p = document.getElementsByTagName('p').item(0);
// 生成ajax对象
var xhr = new XMLHttpRequest();
// 方法1///////////////////////////////////////////////////////////
// 监听点击对象
btn.addEventListener('click',getData,false);
// 注册点击事件函数
function getData() {
xhr.addEventListener('readystatechange',getDD,false);
xhr.open('get','admin/tsconfig.json',true);
xhr.send(null);
}
function getDD() {
if (xhr.readyState === 4){
// console.log(xhr.responseText);
var obj = JSON.parse(xhr.responseText);
p.innerHTML = '名字:'+obj.name+'年龄:'+obj.age+'爱好:'+obj.hobby[1]+'成绩:'+obj.grade.php;
}
}
// 方法2///////////////////////////////////////////////////////////
// btn.addEventListener('click',function () {
// xhr.onreadystatechange = function () {
// if (xhr.readyState === 4) {
// console.log(xhr.responseText);
// var obj = JSON.parse(xhr.responseText);
// p.innerHTML = '名字:'+obj.name+'年龄:'+obj.age+'爱好:'+obj.hobby[1]+'成绩:'+obj.grade.php;
// }
// };
//
// xhr.open('get', 'admin/tsconfig.json', true);
// xhr.send(null);
// },false);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业2、修改昨天的验证表单，把前端发送到后端的信息改成json格式发送
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Ajax验证表单数据</title>
</head>
<body>
<form id="login">
<p>
<label for="email">邮箱:</label>
<input type="text" id="email">
<span id="em"></span>
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password">
<span id="psw"></span>
</p>
<p>
<button id="submit" type="button">登录</button>
<span id="btn"></span>
</p>
</form>
<script>
// 首先拿到各个标签
var login = document.forms.namedItem('login');
var email = login.email;
var em = login.querySelector('#em');
var password = login.password;
var psw = login.querySelector('#psw');
var submit = login.submit;
var btn = login.querySelector('#btn');
submit.addEventListener('click',function () {
// 非空验证 验证完毕反正真后进入表单验证
if (show()) {
// 验证表单
// 创建Ajax
var xhr = new XMLHttpRequest;
// 创建监听事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4){
if (xhr.status === 200){
// btn.innerHTML =xhr.responseText;
// console.log(xhr.responseText)
// 利用JSON.parse命令把字串符类型转换到javaScript的对象或者数组类型
var content = JSON.parse(xhr.responseText);
// btn.style.color = 'red';
// btn.innerHTML = content.message;
switch (content.status) {
case 1:
btn.style.color = 'red';
btn.innerHTML = content.message;
break;
case 2:
btn.style.color = 'red';
btn.innerHTML = content.message;
break;
case 3:
btn.style.color = 'green';
btn.innerHTML = content.message;
break;
}
}
}
};
// 初始化连接
xhr.open('POST','admin/admin.php',true);
// 设置http头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 发送信息
// xhr.send('email='+email.value+'&password='+password.value);
// 利用JSON格式发送
var data = {
email: email.value,
password: password.value
};
// console.log(data);
// javaScript对象转换成json字符串后需要在前面加一个名key 这是留给后端程序获取识别的
// 示例 user={"email":"admin@php.cn","password":"123456"}
var date = 'user=' + JSON.stringify(data);
// console.log(date);
xhr.send(date);
}
},false);
// 非空验证
function show() {
// trim 是清空文本前后空格的命令函数
var temp1 = email.value.trim();
var temp2 = password.value.trim();
if (temp1.length === 0){
em.innerHTML = '请输入邮箱';
email.focus();
return false;
}else if (temp2.length === 0){
psw.innerHTML = '请输入密码';
password.focus();
return false;
}
return true;
}
// 编辑框输入内容后清空占位符的提示
email.addEventListener('input',function () {
em.innerHTML = '';
btn.innerHTML = '';
},false);
password.addEventListener('input',function () {
psw.innerHTML = '';
btn.innerHTML = '';
},false);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例