表单常用元素，获取表单元素,Ajax - GET

表单常用事件：

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基本步骤：

1. 创建：请求对象               var request = new XMLHttpRequest();
   

2. 监听：成功回馈 

   default:

    request.addEventListener("readystatechange", successCallback,false)

3. 设置：请求参数

   request.open('GET','php/user_info.php?user_id='+data,true);
   

4. 发送：异步

   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;
        }
    }