表单常用事件:
1.焦点 :focus
var input = document.getElementById('username');
// focus: 获取焦点
input.addEventListener('focus', function (ev) {
ev.target.style.backgroundColor = 'lightgreen';
});
2.焦点 :blur
var input = document.getElementById('username');
// blur: 失去焦点
input.addEventListener('blur', function (ev) {
ev.target.style = 'clean'
3.变并失去焦点是触发:change
input.addEventListener('change', function (ev) {
console.log( ev.target.value );
}, false);
4.改变就算没有失去焦点也会触发:input
input.addEventListener('input', function (ev) {
console.log( ev.target.value );
}, false);
获取表单元素
获取整个表单 在文档对象中直接有个属性叫forms它可以返回对象中所有表单,要获取哪一forms用namedItem('') document.forms.namedItem('')
获取表单中的元素如input: input中的name属性可以直接定位到当前文本框相当于ID,那么把name属性值直接当作属性来访问forms.name
var login = document.forms.namedItem('login');
var username = login.username
console.log( username );
console.log(username.value);
5.Ajax-get请求获取数据
Ajax基本步骤:
创建:请求对象 var request = new XMLHttpRequest();
监听:成功回馈
default:
request.addEventListener("readystatechange", successCallback,false)
设置:请求参数
request.open('GET','php/user_info.php?user_id='+data,true);
发送:异步
request.send(null); //GET请求默认为空,不传参数,POS请求传参
实例
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.innerHTML = '<span style="color: red">ID必须是整数</span>'; return false; // 当输入全法数据后, 执行Ajax异步调用 default: // 监听成功回调 request.addEventListener('readystatechange', successCallback, false); // 配置参数 // encodeURIComponent():对值中的非法字符进行编码,如空格等,解码:decodeURIComponent() var data = encodeURIComponent(input.value); request.open('GET', 'php/user_info.php?user_id='+data, true); // 发送请求 request.send(null); } } } // 成功回调 function successCallback() { // 当Ajax对象的readyState状态属性变更为4时, 表示请求成功并返回了数据 if (request.readyState === 4) { // 获取页面元素,并将数据渲染到DOM元素中 // console.log(request.responseText); tips.innerHTML = request.responseText; } }