一,JS表单
1.获取表单(前两种常用)
(1)document.getElementById("id属性值");
通过from标签的id属性值获取表单对象
(2)document.表单的name属性值;
通过表单的name属性值获取表单对象
(3)document.forms[下标];
通过指定下标获取表单元素
(4)documents.forms[表单的name属性值];
通过表单的name属性值获取表单对象
document.forms:获取HTML文档中所有的表单对象
<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("----------")
//获取所有表单元素
console.log(document.forms);
//3)document.forms[下标]
console.log(document.forms[0]);
//4)documents.forms[表单的name属性值];
console.log(document.forms['myform2']);
</script>
二,获取表单元素
1,获取input元素
(1)document.getElementById("id属性值");
通过元素的id属性值获取表单元素对象
(2)表单对象.表单元素的name属性值;
通过表单对象中对应的元素的name属性值获取
(3)document.getElementByName("name属性值");
通过表单元素的name属性值获取
(4)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() {
//(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.getElementByName("name属性值");
var uno = document.getElementsByName("uno")[0].value;
console.log(uno);
//(4)document.getElementsByTagName("标签名/元素名");
var intro = document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}
</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
来自:
<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>
function getSelect() {
//获取下拉框对象
var unfrom = document.getElementById("ufrom");
console.log(ufrom);
//获取下拉框的下来选项列表
var opts = ufrom.options;
console.log(opts)
//获取下拉框被选中项的索引
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);
}
四,提交表单
1.使用普通按钮 type="button"
(1)给按钮绑定click点击事件,绑定函数
(2)在函数中,进行表单检验 (非空校验,合法性校验等)
(3)如果校验通过,则手动提交表单
表单对象.submit();
<!--使用普通按钮 type = "button"-->
<form id='myform' name="myform" action="http://www.baidu.com" method="get" >
姓名:<input name="uname" id="uname"/>
<span id="msg" style="font-size: 12px;color: red;"></span><br />
<button type="button" onclick="submitForm1()">提交</button>
</form>
<hr>
<script type="text/javascript">
function submitForm1() {
//得到文本框的值
var uname = document.getElementById("uname").value;
//判断是否为空
if(isEmpty(uname)) {//为空
document.getElementById("msg").innerHTML = "*姓名不能为空!";
//阻止表单提交
return;
}
//手动提交表单
document.getElementById("myform").submit();
}
function isEmpty(str) {
//判断是否为空
if (str == null || str.trim() == "") {
return true;
}
return false;
}
</script>
2.使用提交按钮 type="button"
(1)给按钮绑定click点击事件,绑定函数
(2)函数需要有返回值,返回true或false(如果return false则表单不提交,如果return true或不return则提交)
(3)在函数中,进行表单检验(非空检验,合法性校验等)
(4)如果校验通过,返回true,如果校验不通过则返回false
3.使用提交按钮 type="button"
(1).给表单form元素绑定submit提交事件,绑定函数
(2)函数需要有返回值,返回true或false
οnsubmit="return 函数名()”
(3)在函数中,进行表单检验
(4)如果校验通过,返回true,如果不通过,返回false
五,Jquery Ajax
1,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得到响应结果
<script type="text/javascript">
/**
* 同步请求
*/
function test01() {
//得到XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr.readyState);
xhr.open("get","js/data.json",false);
console.log(xhr.readyState);
//发送请求
xhr.send(null);
console.log(xhr.readyState);
//判断响应状态
if (xhr.status == 200) {
console.log(xhr.responseText);
} else {
console.log("状态码:" + xhr.status + ".原因:" + xhr.responseText)
}
console.log("同步请求……");
}
//test01();
/**
* 异步请求
*/
function test02(){
//得到XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr.readyState);
xhr.open("get","js/data.json",true);
console.log(xhr.readyState);
//发送请求
xhr.send(null);
console.log(xhr.readyState);
//判断响应状态
if (xhr.status == 200) {
console.log(xhr.responseText);
} else {
console.log("状态码:" + xhr.status + ".原因:" + xhr.responseText)
}
console.log("异步请求……");
}
test02();