表单事件与表单元素
//focus 获取焦点
//blur 失去焦点
//change 失去焦点触发检测数据变化
//input 实时检测数据变化触发
//select change / input 效果一样,因为select的焦点和值是绑定的
//option 支持name属性 可以用namedItem()获取
//获取option的索引 var selectedIndex = select.selectedIndex
//select.options 返回所有option innerText可以用label替换
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax-POST</title>
</head>
<body>
<!--登陆表单-->
<h2>用户登陆</h2>
<form action="" name="login">
<p>
<label for="username">用户：</label>
<input type="text" name="username" id="username" placeholder="请输入用户名">
</p>
<p>
<label for="email">邮箱：</label>
<input type="text " name="email" id="email" placeholder="请输入邮箱">
</p>
<p>
<label for="pwd">密码：
</label>
<input type="password" name="pwd" id="pwd">
</p>
<p>
<label for="select">选项：</label>
<select name="select" id="select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</p>
<p>
<button type="button" name="submit">提交</button>
</p>
</form>
<script>
var input = document.forms.namedItem('login');
var btn = login.submit;
var request = new XMLHttpRequest();
login.username.addEventListener('blur',isEmpty,false);
login.email.addEventListener('blur',isEmpty,false);
login.pwd.addEventListener('blur',isEmpty,false);
function isEmpty(ev) {
if (ev.target.value.length ===0){
if (ev.target.nextElementSibling === null){
var tips = document.createElement('span');
tips.style.color = 'red';
switch(ev.target.name){
case 'username':
tips.innerText = '用户名不能为空';
break;
case 'email':
tips.innerText = '用户名不能为空';
break;
case 'pwd':
tips.innerText = '用户名不能为空';
break;
default:
tips.innerText = '未定义错误';
}
ev.target.parentNode.appendChild(tips);
}
ev.target.focus();
}
}
login.username.addEventListener('input',clearTips,false);
login.email.addEventListener('input',clearTips,false);
login.pwd.addEventListener('input',clearTips,false);
function clearTips(ev) {
var tips = ev.target.nextElementSibling;
// console.log(tips);
if (tips !== null){
tips.parentNode.removeChild(tips);
}
}
btn.addEventListener('click',check,false);
function check(ev) {
var username = login.username.value;
var email = login.email.value;
var pwd = login.pwd.value;
var select = login.select.value;
if (username.length===0 ||email.length===0 ||pwd.length===0){
ev.target.removeEventListener('click',check,false);
var blurEvent = new Event('blur');
login.username.dispatchEvent(blurEvent);
return false;
}
var data = 'username='+username+'&email='+email+'&pwd='+pwd+'&select='+select;
request.addEventListener('readystatachange',successCallback,false);
request.open('POST', 'php/check.php', true);
request.setRequestHeader('content-type','application/x-www-form-urlencoded;charest=utf-8');
request.send(data);
}
function successCallback(ev) {
if (request.readyState===4){
console.log(request.responseText);
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
AJAX异步请求
四步骤：1.创建：请求对象；2.监听：成功回调；3. 设置：请求参数；4.发送：异步请求
两种方式GET与POST
GET方式
需要用encodeURIComponent():对值中的非法字符进行编码,如空格等,解码:decodeURIComponent()
var data = encodeURIComponent(input.value);
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax-GET</title>
</head>
<body>
<label for="user-id">用户ID：</label>
<input type="text" name="user_id" id="user-id">
<p id="tips"></p>
<script>
var input = document.getElementById('user-id');
var tips = document.getElementById('tips');
var request = new XMLHttpRequest();
input.addEventListener('keypress',getUserInfo, false);
function getUserInfo(ev) {
if (ev.key === 'Enter'){
switch (true) {
case input.value.length === 0 :
tips.innerHTML = '<span style="color: red">请输入正确的用户ID</span>';
return false;
case isNaN(input.value):
tips.innetHTML = '<span style="color: red">ID必须为整数</span>';
return false;
case input.value.length >0 && input.value.length <3:
tips.innerHTML = '<span style="color: red">用户ID长度为3</span>';
return false;
default:
request.addEventListener('readystatechange',successCallback,false);
var data = encodeURIComponent(input.value);
request.open('GET', 'php/user_info.php?user_id='+data,true);
request.send(null);
}
}
}
function successCallback() {
if (request.readyState === 4){
tips.innerHTML = request.responseText;
}
}
input.addEventListener('input',function () {
tips.innerHTML = null ;
},false);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
POST方式
1.需要设置请求头setRequestHeader（'content-type', 'application/x-www-form-urlencoded;charset=utf-8'
）；
2.以键值对封装传输的数据 request.addEventListener('readystatechange', successCallback, false);
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax-POST</title>
</head>
<body>
<!--登陆表单-->
<h2>用户登陆</h2>
<form action="" name="login">
<p>
<label for="username">用户：</label>
<input type="text" name="username" id="username" placeholder="请输入用户名">
</p>
<p>
<label for="email">邮箱：</label>
<input type="text " name="email" id="email" placeholder="请输入邮箱">
</p>
<p>
<label for="pwd">密码：
</label>
<input type="password" name="pwd" id="pwd">
</p>
<p>
<label for="select">选项：</label>
<select name="select" id="select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</p>
<p>
<button type="button" name="submit">提交</button>
</p>
</form>
<script>
var input = document.forms.namedItem('login');
var btn = login.submit;
var request = new XMLHttpRequest();
login.username.addEventListener('blur',isEmpty,false);
login.email.addEventListener('blur',isEmpty,false);
login.pwd.addEventListener('blur',isEmpty,false);
function isEmpty(ev) {
if (ev.target.value.length ===0){
if (ev.target.nextElementSibling === null){
var tips = document.createElement('span');
tips.style.color = 'red';
switch(ev.target.name){
case 'username':
tips.innerText = '用户名不能为空';
break;
case 'email':
tips.innerText = '用户名不能为空';
break;
case 'pwd':
tips.innerText = '用户名不能为空';
break;
default:
tips.innerText = '未定义错误';
}
ev.target.parentNode.appendChild(tips);
}
ev.target.focus();
}
}
login.username.addEventListener('input',clearTips,false);
login.email.addEventListener('input',clearTips,false);
login.pwd.addEventListener('input',clearTips,false);
function clearTips(ev) {
var tips = ev.target.nextElementSibling;
// console.log(tips);
if (tips !== null){
tips.parentNode.removeChild(tips);
}
}
btn.addEventListener('click',check,false);
function check(ev) {
var username = login.username.value;
var email = login.email.value;
var pwd = login.pwd.value;
var select = login.select.value;
if (username.length===0 ||email.length===0 ||pwd.length===0){
ev.target.removeEventListener('click',check,false);
var blurEvent = new Event('blur');
login.username.dispatchEvent(blurEvent);
return false;
}
var data = 'username='+username+'&email='+email+'&pwd='+pwd+'&select='+select;
request.addEventListener('readystatechange',successCallback,false);
request.open('POST', 'php/check.php', true);
request.setRequestHeader('content-type','application/x-www-form-urlencoded;charest=utf-8');
request.send(data);
}
function successCallback(ev) {
if (request.readyState===4){
console.log(request.responseText);
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例