实例
获取获取服务器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>json
</title>
</head>
<body>
<button>获取服务器数据</button>
<h1></h1>
<script>
// 先获取一下button按钮
var btn = document.getElementsByTagName('button').item(0);
// 创建request对象
var request = new XMLHttpRequest();
// 添加点击事件
btn.addEventListener('click',getData,false);
// 被点击后触发的事件
function getData (){
// 添加点击事件
request.addEventListener('readystatechange', show, false);
// 初始化ajax
request.open('get', 'admin/demo1.php',true);
// 发送请求
request.send(null);
}
function show(){
// 判断一下是否200加载
if(request.readyState === 4){
// 获取第一个h1标签
var h1 = document.getElementsByTagName('h1').item(0);
// 转换成js对象
var obj = JSON.parse(request.responseText);
//看一下数据有没有获取到
console.log(obj);
// 使用刚才获取的数据
h1.innerHTML = obj.name + ',php成绩是:' + obj.grade.php +'javascript成绩是:' + obj.grade.javascript ;
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
json表单验证案例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ajax.表单验证</title>
</head>
<body>
<h3>用户登录</h3>
<form name="login" method="post" onsubmit="return false">
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="example@gmail.com">
<span style="color: red" id="error_email">*</span>
</p>
<p>
<label for="password">密码: </label>
<input type="password" id="password" name="password" placeholder="不少于6位">
<span style="color: red" id="error_psw">*</span>
</p>
<p>
<button id="submit" type="button">提交</button>
<span id="result"></span>
</p>
</form>
<script>
// 获取必要的元素
var login = document.forms.namedItem('login');
var submit = document.getElementById('submit');
var error_email = document.getElementById('error_email');
var error_psw = document.getElementById('error_psw');
var result = document.getElementById('result');
function checkUser() {
// 1.数据非空验证
var user = isEmpty(login, error_email, error_psw);
return user ? verfiy(user, result) : false;
}
submit.addEventListener('click',checkUser,false);
// 非空验证
function isEmpty(form, error1, error2) {
var email = form.email.value.trim();
var password = form.password.value.trim();
if (email.length === 0) {
error1.innerText = '邮箱不能为空';
login.email.focus();
return false;
} else if (password.length === 0){
error2.innerText = '密码不能为空';
login.password.focus();
return false;
}
// 验证通过,返回一个对象字面量
return{
email:email,
password:password
}
}
// 5555555555555555555555555
function verfiy(user,resilt){
// 创建request对象
var request = new XMLHttpRequest();
// 监听响应状态
request.onreadystatechange = function(){
if(request.readyState === 4){//准备就绪
console.log(request.responseText);
result.innerHTML = request.responseText;
var obj = JSON.parse(request.responseText);
// console.log(obj);
switch(boj.status){
case 1 :
result.style
}
}
return false;
};
// 设置请求参数
request.open('post','admin/check.php',true);
// 设置头信息,将内容类型设置为表单提交方式
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求
// 要提交是数据
var data = 'email=' + user.email + '&password=' + user.password;
request.send(data);
}
login.email.addEventListener('input',function(){
error_email.innerText = '*';//清除邮箱的错误的提示
result.innerText = '';//清除服务器返回的验证提示
},
false);
login.password.addEventListener('input',function(){
error_psw.innerText = '*';//清除邮箱密码的错误的提示
result.innerText = '';//清除服务器返回的验证提示
},
false);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例