一、获取表单
1.document.getElementById("id属性值")；
通过from标签的id属性值获取表单对象
2.docunment.表单的name属性值；
通过表单的name属性值获取表单对象
3.document.forms[下标]；
通过指定下标获取表单对象
4.document.forms[表单的name属性值]；
通过表单的name属性值获取表单对象
document.forms:获取HTML文档中所有的表单对象
<form id= "myform1" name="myform1" action=""></form>
<form id= "myform2" name="myform2" action=""></form>
<form id= "myform3" name="myform3" action=""></form>
<script type="text/javascript">
//1.document.getElementById("id属性值")；
console.log(document.getElementById("myform1"));
//2.docunment.表单的name属性值；
console.log(document.forms);
//3.document.forms[下标]；
console.log(document.forms[0]);
//4.document.forms[表单的name属性值]；
console.log(document.forms['myform2']);
</script>二、获取表单元素
1.获取input元素
1.document.getElementById("id属性值");
通过元素的id属性获取表单元素对象
2.表单对象.表单元素的name属性值：
通过表单对象中对应的元素的name属性值获取
3.document.getElementsByName("name属性值")：
通过表单元素的内幕属性值获取
4.document.getElementsByTagName("标签名/元素名")
通过标签名获取表单元素对象
/*获取input元素*/
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 intro=document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}2.获取单选按钮
注:相同的一组单选按钮，需要设置相同的name属性值
1.document.getElementByName("name属性值")；
通过name属性值获取
2.判断单选按钮是否选中
checked选中状态
在JS代码中
checkeed=true 表示选中
heckedfalse 表示不选中
在HTML标签中
checked=checked或checked 表示选中
不设置checked属性 表示不选中
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;
注:
1.获取下拉框选中项的值时：(value)
如果option标签设置了value属性值，则获取value属性对应的值
如果option标签未设置value属性值，则获取的是option双标签中的文本值
2.下拉框的选中状态
选中状态:selected=selected、selected、selected=true
未被选中状态:不设置selected属性、selected=false
//获取下拉框对象
var ufrom=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);
三、 提交表单
一、使用普通按钮，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>二、使用提交按钮 type="submit"
1.给按钮绑定click点击事件，绑定函数
2.函数需要有返回值，返回true或false(如果return false，则表单不会提交；如果return true或不return，则表单提交)
οnclick="return 函数名()"
3.在函数中，进行表单校验(非空校验、合法性校验等)
4.如果校验通过，返回true；如果校验不通过则返回false。
<!-- 使用提交按钮 type="sumbit" -->
<form id="myform2" action="http://www.baidu.com" method="get" >
姓名:<input name="uname2" id="uname2"/>
<span id="msg2" style="font-size:12px;color:red;"></span><br/>
<button type ="submit" onclick="return submitForm2()">提交</button>
</form>三、使用提交按钮 type="sumbit"
1.给表单form元素绑定sumbit提交事件，绑定函数
2.函数需要有返回值，返回true或false(如果return false，则表单不会提交；如果return true或不return，则表单提交)
οnsubmit="return 函数名()"
3.在函数中，进行表单校验(非空校验、合法性校验等)
4.如果校验通过，返回true；如果校验不通过则返回false。
<!-- 使用提交按钮 type="sumbit" -->
<form id="myform3" action="http://www.baidu.com" method="get" onsubmit="return submitForm3()" >
姓名:<input name="uname3" id="uname3"/>
<span id="msg3" style="font-size:12px;color:red;"></span><br/>
<button type ="submit">提交</button>
</form> <script type="text/javascript">
/* 表单校验 提交表单*/
function submitForm1(){
//得到文本框的值
var uname = document.getElementById("uname").value;
//判断是否为空
if(isEmpty(uname)){ //为空
//设置提示信息(设置span元素的值)
document.getElementById("msg").innerHTML = "*姓名不能为空";
//阻止表单提交
return;
//手动提交表单
}
document.getElementById("myform").submit();
}
function submitForm2(){
//得到文本框的值
var uname = document.getElementById("uname2").value;
//判断是否为空
if(isEmpty(uname)){ //为空
//设置提示信息(设置span元素的值)
document.getElementById("msg2").innerHTML = "*姓名不能为空";
//阻止表单提交
return false;
//手动提交表单
}
return true;
}
function submitForm3(){
//得到文本框的值
var uname = document.getElementById("uname3").value;
//判断是否为空
if(isEmpty(uname)){ //为空
//设置提示信息(设置span元素的值)
document.getElementById("msg3").innerHTML = "*姓名不能为空";
//阻止表单提交
return false;
//手动提交表单
}
return true;
}
function isEmpty(str){
//判断是否为空
if(str == null || str.trim()==""){
return true;
}
return false;
}
</script>四、 Ajax
异步无刷新技术
原生Ajax的实现流程
1.得到XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2.打开请求
xhr.open(method,url,async);
method:请求方式，通常是GET|POST
url:请求地址
async:是否异步。如果是true表示异步，false表示同步
3.发送请求
xhr.send(params);
params:请求时需要传递参数
如果是GET请求，设置null。(GET请求设置在null后面)
如果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","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();
console.log("----------------------------------");
/* 异步请求*/
function test02(){
//得到XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//打开请求
xhr.open("get","data.json",true);//同步请求
//发送请求
xhr.send(null);
/* 由于是异步请求，所需要知道后台自己已经请求处理完毕，才能获取响应结果
通过监听 readyState 的变化来得知后面的处理状态 4=完成处理
xhr.onreadystatechange = function()
*/
xhr.onreadystatechange = function(){
//当readyState)的值为4时，表示结果成功响应
if(xhr.readyState == 4) {
if(xhr.status == 200){
console.log(xhr.responseText);
}else{
console.log("状态码:"+xhr.status+",原因:"+xhr.responseText)
}
}
}
//判断响应状态
console.log("异步请求");
}
//异步
test02();
</script>
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
