1.表单
1.1获取表单
document.forms:获取的时所有的表
1.document.表单的name属性值;
通过表单的name属性值获取表单对象
console.log(document.myform2);
2.document.forms[下标];
通过指定下标获取表单元素
console.log(document.forms[0]);
3.document.forms[表单的name属性值];
通过表单的name属性值获取表单对象
console.log(document.forms['myform2']);
1.2获取表单元素
1.document.getElementById("id属性值")
通过元素的id属性值获取表单元素对象
var uname=document.getElementById("uname").value;
console.log(uname);
2.表单对象.表单元素的name属性值;
通过表单对象中对应的元素的name属性值获取
var pwd=document.getElementById("myform").upwd.value;
console.log(pwd);
3.document.getElementsByname("name属性值");
通过2表单元素的name属性值获取
var uno=document.getElementsByName('uno')[0].value;
console.log(uno);
4.document.getElementsByTagName("标签名/元素名");
通过标签名获取表单元素对象
var intro=document.getElementsByTagName("textarea")[0].value;
console.log(intro);
1.3获取下拉选项
1.获取下拉框对象
var 对象=document.getElementById("id属性值");
var uform=document.getElementById("uform");
console.log(uform);
2.获取下拉框的下拉选项列表
var options=下拉框对象.options;
var opts=uform.options;
console.log(opts);
3.获取下拉框选中项的索引
var index=下拉框对象.selectedIndex;
var index=uform.selectedIndex;
console.log("选中项的下标"+index);
4.获取下拉框被选中项的值
var 值=下拉框对象.value;
var val=uform.value;
console.log("被选中项的值"+val);
5.通过选中项的下标获取下拉框被选中项的值
var 值=下拉框对象.options[index].value;
var val2=uform.options[index].value;
console.log("被选中项的值:"+val2);
6.获取下拉框被选中项的文本
var 文本值=下拉框对象.options[index].text;
var txt=uform.options[index].text;
console.log("被选中项的文本:"+txt);
注意:“
1.获取下拉框选中项的值时;(value)
如果option标签设置了value属性值,则获取vlaue属对应的值;
如果option标签未设置value属性值,则获取的时option双标签中的文本值;
2.下拉框的选中状态
选中状态:selected=selected、selected、selected=true
未选中状态:不设置selected属性,selected=false;
1.4提交表单
1.使用普通按钮 type="button"
(1)给按钮绑定click点击事件,绑定函数
(2)在函数中,进行表单校验(非空校验,合法性校验)
(3)如果校验通过,则手动提交表单
表单对象.submit();
<form id="myform" name="myform" action="#" method="get">
姓名:<input name="uname" id="uname">
<span id="msg" style="font-size:12px;color=red"></span><br/>
<button type="button" οnclick="submitForm1()">提交</button>
</form>
<script>
function submitForm1(){
var uname=document.getElementById("uname").value;
if(isEmpty(uname)){
document.getElementById("msg").innerHTML="*姓名不能为空!";
return;
}
document.getElementById("myfrom").submit();
}
function isEmpty(str){
if(str==null||str.trim()==""){
return true;
}
}
</script>
2.使用提交按钮 type="submit"
(1)给按钮绑定click点击事件,绑定函数
(2)函数需要有返回值时,返回true或false,(如果return false,则表单不会提交;如果return true或不return,则表单提交;οnclick="return(函数名)"
(3)在函数中,进行表单校验(非空校验,合法性校验)
(4)如果校验通过,返回true,如果不通过,返回false
<form id="myform2" name="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" οnclick="return submitForm2()">提交</button>
</form>
function submitForm2(){
var uname2=document.getElementById("uname2").value;
if(isEmpty(uname2)){
document.getElementById("msg2").innerHTML="*姓名不能为空!";
return false;
}
return true;
}
3.使用提交按钮type="submit"
(1)给表单form元素绑定提交事件,绑定函数
(2)函数需要有返回值,返回true或false(如果return false,则表单不会提交,如果return true或不return,则表单提交;οnsubmit="return函数名()"
(3)在函数中,进行表单校验(非空校验,合法性校验)
(4)如果校验通过,返回true,如果不通过,返回false
<form id="myform3" name="myform3" action="http://www.baidu.com" method="get" οnsubmit="return submitForm3()">
姓名:<input name="uname3" id="uname3">
<span id="msg3" style="font-size:12px;color=red"></span><br/>
<button type="submit">提交</button>
</form>
function submitForm3(){
var uname3=document.getElementById("uname3").value;
if(isEmpty(uname3)){
document.getElementById("msg3").innerHTML="*姓名不能为空!";
return false;
}
return true;
}
2.Jquery Ajax
异步无刷新技术
原生Ajax的实现流程
1.得到XMLHttpRequest对象
var xhr=new XMLHttpRequest();
2.打开请求
xhr.open(method,uri,async);
method 请求方式,通常是GET|POST
uri:请求地址
async:是否异步。如果时true表示异步,false表示同步
3.发送请求
xhr.send(parse);
params:请求时需要传递的参数
如果是GET请求,设置null。(GET请求的参数设置在url后面)
如果是POST请求,无参数设置为null,有参数则设置参数。
4.接收响应
xhr.status 响应状态(200=响应成功,404=资源未找到,505=服务器异常)
xhr.responseText 得到响应结果
2.1同步请求
function test01(){
var xhr=new XMLHttpRequest();
xhr.open("get","js/data.json",false);
xhr.send(null);
if(xhr.status==200){
console.log(xhr.responseText);
}
else
{
console.log("状体码:"+xhr.status+",原因"+xhr.responseText)
}
}
test01();
2.2异步请求
function test02(){
var xhr=new XMLHttpRequest();
xhr.open("get","js/data.json",true);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.status==4){
if(xhr.status==200){
console.log(xhr.responseText);
}
}
else
{
console.log("状体码:"+xhr.status+",原因"+xhr.responseText)
}
}
console.log("异步请求");
}
test02();