一.JS表单
表单是我们页面向后台传输数据的一种非常常见的方式,在进行数据发送(请求发出)之前,我们应该先在页面进行一系列数据合法性的验证,节省不必要的错误数据的传输,以及提高用户的体验度。
1.获取表单
(1)document.getElementById("ID属性值");
通过from标签的ID属性值获取表单对象
(2)document.表单的name属性值;
通过表单的name属性值获取表单对象
(3)document.forms[下标];
通过指定下标获取表单元素
(4)document.forms [表单的name属性值];
通过表单的name属性值获取表单对象
document.forms:获取HTML文档中所有的表单对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>获取表单</title>
</head>
<body>
<form id="myform1" name="myform1" action=""></form>
<form id="myform2" name="myform2" action=""></form>
<script type="text/javascript">
// 1.document.getElementById("ID属性值");
console.log(document.getElementById("myform1"));
// 2.document.表单的name属性值;
console.log(document.myform2);
console.log(document.forms);
//3.document.forms[下标];
console.log(document.forms[0]);
// 4.document.forms [表单的name属性值];
console.log(document.forms['myform2']);
</script>
</body>
</html>
2.获取表单元素
获取input元素
(1)document.getElementById("ID属性值");
通过from标签的ID属性值获取表单元素对象
(2)表单对象.表单元素的name属性值;
通过表单对象中对应的元素的name属性值获取
(3)document.getElementsByName("name属性值");
通过表单元素的name属性值获取
(4)document.getElementsByTagName("标签名/元素名");
通过标签名获取表单元素对象
<body>
<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="123" /><br />
<!-- 隐藏域 -->
<input type="hidden" id="uno" name="uno" value="隐藏域" /><br />
<!-- 文本域 -->
个人说明: <textarea name="in"></textarea>
<br />
<button type="button" onclick="gettxt();">获取元素内容</button>
</form>
</body>
<script type="text/javascript">
function gettxt(){
// 1.document.getElementById("ID属性值");
var uname = document.getElementById("uname").value;
console.log(uname);
// 2.表单对象.表单元素的name属性值;
var pwd=document.getElementById("myform").upwd.value;
console.log(pwd);
// 3.document.getElementsByName("name属性值")
var uno=document.getElementsByName("uno")[0].value;
console.log(uno);
// 4.document.getElementsByTagName("标签名/元素名")
var in=document.getElementsByTagName("textarea")[0].value;
console.log(in);
}
</script>
获取下拉选项
(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
<body>
<select id="uform" name="uform">
<option value="-1">请选择</option>
<option value="-1">北京</option>
<option value="-1">上海</option>
</select>
<button type="button" onclick="getselect();">获取下拉选项</button>
</body>
<script type="text/javascript">
function getselect() {
// 获取下拉框对象
var uform = document.getElementById("uform");
console.log(uform);
// 获取下拉框的下拉选项列表
var opts = uform.options;
console.log(opts);
// 获取下拉框被选中项的索引
var index = uform.selectedIndex;
console.log("选中项的下标:" + index);
// 获取下拉框被选中项的值
var val = uform.value;
console.log("被选中项的值:" + val);
// 通过选中项的下标获取下拉框被选中项的值
var val2 = uform.options[index];
console.log("被选中项的值:" + val2);
// 获取下拉框被选中项的文本
var txt = uform.options[index].text;
console.log("被选中项的值:" + txt);
}
</script>
3.提交表单
使用普通按钮 type = " button "(常用)
(1)给按钮绑定click点击事件,绑定函数
(2)在函数中,进行表单校验(非空校验、合法性校验等)
(3)如果校验通过,则手动提交表单
表单对象.submit();
使用提交按钮 type = " submit "
(1)给按钮绑定click点击事件,绑定函数
(2)函数需要有返回值,返回true或false(如果return false,则表单不会提交;如果return true或不return,则表单提交)
onclick = "return 函数名()"
(3)在函数中,进行表单校验(非空校验、合法性校验等)
(4)如果校验通过,返回true;如果校验不通过,则返回false
使用提交按钮 type = " submit "
(1)给表单form元素绑定submit提交事件,绑定函数
(2)函数需要有返回值,返回true或false(如果return false,则表单不会提交;如果return true或不return,则表单提交)
onclick = "return 函数名()"
(3)在函数中,进行表单校验(非空校验、合法性校验等)
(4)如果校验通过,返回true;如果校验不通过,则返回false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>提交表单</title>
</head>
<body>
<!-- 使用普通按钮 type = " button " -->
<form id="myform" name="myform" action="http://www.baidu.com" method="get">
姓名:<input name="uname" id="uname" /> <span id="ms"></span><br />
<button type="button" onclick="Submit1();">提交</button>
</form>
<script type="text/javascript">
// 表单校验,提交表单
function submit1() {
//得到文本框的值
var uname = document.getElementById("uname").value;
//判断是否为空
//手动提交表单
document.getElementById("myform").submit();
/*
判断字符串是否为空
如果为空,返回true
如果不为空,返回false
*/
}
submit1();
function isEmpty(str) {
//判断是否为空
if (str == null || str.trim() == "") {
return true;
}
return false;
}
</script>
</body>
</html>
二.Jquery 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 得到响应结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax</title>
</head>
<body>
<script type="text/javascript">
/*同步请求*/
function t1() {
// 得到 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// .打开请求
xhr.open("GET", "js/new_file.json", false); //同步请求
// 发送请求
xhr.send(null);
//判断响应状态
if (xhr.status == 200) {
console.log(xhr.responseText);
} else {
console.log("状态码:" + xhr.status + ",原因:" + xhr.responseText)
}
}
t1();
// function t2(){
// // 得到 XMLHttpRequest 对象
// var xhr = new XMLHttpRequest();
// // .打开请求
// xhr.open("GET","js/new_file.json",true);//异步请求
// // 发送请求
// xhr.send(null);
// //判断响应状态
// if(xhr.status == 200){
// console.log(xhr.responseText);
// }
// else{
// console.log("状态码:"+xhr.status+",原因:"+xhr.responseText)
// }
// t2();
// }
</script>
</body>
</html>