php获取表单value元素,表单常用元素，获取表单元素,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基本步骤：创建：请求对象               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 = 'ID不能为空';

return false;

// 检测输入的是否是整数

case isNaN(input.value):

tips.innerHTML = 'ID必须是整数';

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;

}

}