博客列表 >表单常用元素,获取表单元素,Ajax - GET

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

耿玉洁的博客
耿玉洁的博客原创
2019年07月17日 11:12:56660浏览

表单常用事件:

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


 

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议