第八次前端培训（JavaScript）

JS表单

表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应在现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传递，以及提高用户的体验度。

获取表单:

document.getElementById("id属性值")——通过from标签的id属性值获取表单对象
document.表单的name属性值——通过表单的name属性值获取表单对象
document.forms——获取HTML文档中所有的表单对象
document.forms[表单的name属性值]——通过表单的name属性值获取表单对象
document.forms[下标]——通过指定下标获取表单元素

获取表单元素：

1.获取input元素：

document.getElementById("id属性值")——通过元素的id属性值获取表单元素对象
表单对象.表单元素的name属性值——通过表单对象中对应的元素的name属性值获取
document.getElementsByName("name属性值")——通过表单元素的name属性值获取
document.getElementsByTagName("标签名/元素名")——通过标签名获取表单元素对象

<form id="myform" name="myform" action="" method="get">姓名：<input type="text" id="uname" name="uname" value="zs" /><br />密码：<input type="password" id="upwd" name="upwd" value="1234" /><br /><input type="hidden" id="uno" name="uno" value="隐藏域" /> 个人说明：<textarea name="intro"></textarea><br/><button type="button" onclick="getTxt()">获取元素内容</button>
</form><script type="text/javascript">function getTxt(){var uname = document.getElementById("uname").valueconsole.log(uname)var pwd = document.getElementById("myform").upwd.valueconsole.log(pwd)var uno = document.getElementsByName("uno")[0].valueconsole.log(uno)var intro = document.getElementsByTagName("textarea")[0].valueconsole.log(intro)}</script>

2.获取单选按钮：（注：相同的一组单选按钮，需要设置相同的name属性值）

（1)document.getElementByName("name属性值")

通过name属性值获取

（2）判断单选按钮是否选中

checked 选中状态

在JS代码中

checked=true 表示选中

不设置checked属性表示不选中

在HTML标签中

checked=checked 或 checked 表示选中

（3）获取单选按钮的值

元素.value

3.获取多选按钮

与单选按钮相同

4.获取下拉选项

(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

注：

获取下拉框选中项的值时：（value）

如果option标签设置了value属性值，则获取value属性对应的值

如果option标签未设置了value属性值，则获取的是option双标签中的文本值

下拉框的选中状态：

选中状态：selected=selected，selected，selected = true

未选中状态：不设置selected属性值，selected = false

提交表单：

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

给按钮绑定click点击事件，绑定函数
在函数中，进行表单校验（非空校验，合法性校验等）
如果校验通过，则手动提交表单表单对象.submit()

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

给按钮绑定click点击事件，绑定函数
函数需要有返回值，返回true或false（如果return false，则表单不会提交；如果return true或不return，则表单提交。） onclick = "return 函数名（）"
在函数中，进行表单校验（非空校验，合法性校验等）
如果校验通过，返回true；如果校验不通过，则返回false

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

给表单form元素绑定submit提交事件，绑定函数
函数需要有返回值，返回true或false（如果return false，则表单不会提交；如果return true或不return，则表单提交。） onsubmit = "return 函数名（）"
在函数中，进行表单校验（非空校验，合法性校验等）
如果校验通过，返回true；如果校验不通过，则返回false

Jqurey Ajax

Ajax:异步无刷新技术

原生Ajax的实现流程：

1.得到XMLHttpRequest对象

var xhr = new XMLHttpRequest（）

2.打开请求

xhr.open(method，uri，async)

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

uri：请求地址

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

3.发送请求

xhr.send(params)；

params：请求时需要传递的参数

如果是GET请求，设置null。（GET 请求的参数设置在url后面）

如果是POST请求，无参数设置为null，有参数则设置参数

4.接收相应

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

xhr.responseText 得到响应结果