目录
1.表单
表单是我们页面向后台传输数据的一种非常常见的方式,在进行数据发送(请求发出)之前,我们应该先在页面进行一系列数据合法性的验证,节省不必要的错误数据的传输,以及提高用户的体验度
2.获取表单
- document.表单的name属性值;
- document.getElementById(“ID属性值”);//通过from标签的ID属性值获取表单对象
- document.forms[表单的name属性值];
- document.forms[下标]; //从 0 开始
document.forms:获取HTML文档中所有的表单对象
<body>
<form id="myform1" name="myform1" action=""></form>
<form id="myform2" name="myform2" action=""></form>
<script type="text/javascript">
// document.getElementById(“ID属性值”);
console.log(document.getElementById("myform1"));
// document.表单的name属性值;
console.log(document.myform2);
console.log("----------------");
// 获取所有表单
console.log(document.forms);
// document.forms[下标];
console.log(document.forms[0]);
// document.forms[表单的name属性值];
console.log(document.forms['myform2']);
</script>
</body>
3.获取表单元素
1.获取input元素
- document.getElementById("id属性值")
- 表单对象.表单元素的name属性值
- document.getElementsByName("name属性值")[下标] // 从0开始
- document.getElementsByTagName("标签名/元素名")[下标] // 从0开始
<!-- 获取表单元素 -->
<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="隐藏域" /><br>
<!-- 文本域 -->
个人说明: <textarea name="in"></textarea><br>
<button type="button" onclick="getTxt();">获取元素内容</button>
</form>
<script type="text/javascript">
function getTxt(){
// document.getElementById("id属性值");
var name = document.getElementById("uname").value;
console.log(uname);
// 表单对象.表单元素的name属性值
var pwd = document.getElementById("myform").upwd.value;
console.log(pwd);
// document.getElementsByName("name属性值")
var uno = document.getElementsByName("uno")[0].value;
console.log(uno);
// document.getElementsByTagName("标签名/元素名")
var intro = document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}
</script>
.value:获取当前类的值
2.获取下拉选项
- 获取下拉框对象
var 对象 = document.getElementById("ID属性值");
- 获取下拉框的下拉选项列表
var options = 下拉框对象.options;
- 获取下拉框被选中项的索引
var index = 下拉框对象.selectedIndex;
- 获取下拉框被选中项的值
var 值 = 下拉框对象.value;
- 通过选中项的下标获取下拉框被选中项的值
var 值 = 下拉框对象.options [ index ].value;
- 获取下拉框被选中项的文本
var 文本值 = 下拉框对象.options [ index ].text;
注:
1、获取下拉框选中项的值时(value)
如果option标签设置了value属性值,则获取value属性对应的值
如果option标签未设置value属性值,则获取的是option双标签中的文本值
2、下拉框的选中状态
选中状态:selected=selected、selected、selected=true
未选中状态:不设置selected属性、selected=false
<!-- 获取下拉选项 -->
<form>
<select id="ufrom" name="ufrom">
<option value="">请选择</option>
<option value="Beijing" selected="selected">北京</option>
<option value="Shanghai">上海</option>
<option >杭州</option>
</select>
<button type="button" onclick="getSelect()">获取下拉选项</button>
</form>
<script type="text/javascript">
function getSelect(){
// 获取下拉框对象
var ufrom = document.getElementById("ufrom");
console.log(ufrom);
// 获取下拉框的下拉选项列表
var options = ufrom.options;
console.log(ufrom);
// 获取下拉框被选中项的索引
var index = ufrom.selectedIndex;
console.log("选中项的下标"+index);
// 获取下拉框被选中项的值
var val = ufrom.value;
console.log("选中项的下标 " + val);
// 通过选中项的下标获取下拉框被选中项的值
var val2 = ufrom.options [ index ].value;
console.log("选中项的下标 " + val2);
// 获取下拉框被选中项的文本
var txt = ufrom.options [ index ].text;
console.log("选中项的下标 " + txt);
}
</script>
4.提交表单
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,则表单提交)
onclick = "return 函数名()"
- 在函数中,进行表单校验(非空校验、合法性校验等)
- 如果校验通过,返回true;如果校验不通过,则返回false
5.Ajax
Ajax:异步不刷新技术
原生Ajax的实现流程
- 得到XMLHttpRequest对象
var xhr = new XMLHttpRequest();
- 打开请求
xhr.open(method,url,async);
- method: 请求方式,通常是GET|POST
- url:请求地址
- async:是否异步,如果是true表示异步,false表示同步
- 发送请求
xhr.send(params);
params:请求时需要传递的参数
如果是GET请求,设置null
如果是POST请求,无参数设置为null,有参数则设置参数
- 接收响应
- xhr.status 响应状态(200-响应成功,400-资源未找到,500-服务器异常)
- xhr.responseText 得到响应结果