梅科尔工作室-李庆浩-网页前端8

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"> &nbsp;
            <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"> &nbsp;
            <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"> &nbsp;
            <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();