网页前端第八次培训(表单）

一.获取表单（前两种常用）

1.document.getElementById("id属性值"）；

通过from标签的id属性值获取表单对象

2.document.表单的name属性值；

通过表单的name属性值获取表单对象

3.document.forms[下标]；

通过指定下标获取表单元素

4.document.forms[表单的name属性值]；

通过表单的name属性值获取表单对象

document.forms:获取HTML文档中所有的表单对象

二.获取表单元素

1.获取input元素

(1) document.getElementById("id属性值");

通过元素的id属性值获取表单元素对象

(2)表单对象.表单元素的name属性值;

通过表单对象中对应的元素的name属性值获取

(3)document.getELementsByName("name属性值");

通过表单元素的name属性值获取

(4)document.getELementsByTagName("标签名/元素名");

通过标签名获取表单元素对象

2.获取单选按钮
注：相同的一组单选按钮，需要设置相同的name属性值
1. document.getElementByName("name属性值")；通过name属性值获取
2.判断单选按钮是否选中
checked 选中状态
在JS代码中
checked=true 表示选中
checked=false 表示不选中
在HTML标签中
checked=checked或checked 表示选中不设置checked属性 表示不选中
3.获取单选按钮的值
元素.value；
3.获取多选按钮
与单选按钮相同

三.获取下拉框

1 .获取下拉框对象

var 对象=document.getElementById("id属性值”)；

2.获取下拉框的下拉选项列表

var options =下拉框对象.options；

3.获取下拉框被选中项的索引

var index = 下拉框对象.selectedIndex;

4.获取下拉框被选中项的值

var 值= 下拉框对象.value；

5.通过选中项的下标获取下拉框被选中项的值

var值=下拉框对象.options[index].value;

6.获取下拉框被选中项的文本

var 文本值 = 下拉框对象.options[index].text;

注：
1.获取下拉框选中项的值时： (value)
如果option标签设置了value属性值，则获取value属性对应的值；如果option标签未设置value属性值，则获取的是option双标签中的文本值
2.下拉框的选中状态：
选中状态：selected selected、selected、selected=true未选中状态：不设置selected属性、selected=false


 

四.提交表单

1.使用普通按钮 type="button"

(1)给按钮绑定click点击事件，绑定函数

(2)在函数中，进行表单校验（非空校验，合法性校验等）

(3)如果校验通过，则手动提交标单

表单对象.submit()；

2.使用提交按钮 type = "submit"

(1)给按钮绑定click点击事件，绑定函数

(2)函数需要有返回值，返回true或false （如果return false,则表单不会提交；如果return true或不return,则表单提交）

οnclick="return 函数()"

(3)在函数中，进行表单校验，（非空校验，合法行校验等）

(4)如果校验通过，返回true,如果校验不通过，则返回false

3.使用提交按钮 type ="submit"

(1)给表单form元素绑定submit提交事件，绑定函数

(2)函数需要有返回值，返回true或false （如果return false,则表单不会提交；如果return true或不return,则表单提交）

οnsubmit="return 函数()"

五.AJax

1.ajax
异步无刷新技术

原生Ajax的实现流程：
1.得到XMLHttpRequest对象  var xhr = new XmltttpRequest();

2.打开请求

xhr.open(method,url,async);

        method:请求方式，通常是GET|POST

        uri:请求地址

        async:是否异步。如果是true表示异步，false表示同步

3.发送请求

xhr.send(params);

params:请求时需要传递的参数。如果是GET请求，设置null.(GET请求的参数设置在url后面)；如果是POST请求，无参数设置为null,有参数则设置参数。

4.接收响应

xhr.statua 响应状态 （200=响应成功，404=资源未找到，500=服务器异常）

xhr.responseTest 得到响应结果



jquery调用ajax方法：
        格式：S.ajax(1);
        参数：
t                ype：请求方式GET/POST
                url：请求地址 url
                async：是否异步，默认是true表示异步
                data：发送到服务器的数据
                dataType：预期服务器返回的数据类型
                contentType：设置请求头
                success：请求成功时调用此函数
                error：请求失败时调用此函数