8.7.表单

表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。

8.7.1.获取表单

前两种常用

1、document.表单名称2、document.getElementById(表单 id);3、document.forms[表单名称] 4、document.forms[索引]; //从 0 开始

例如：

<body>    <form id='myform' name="myform" action="" method="post"></form>    <form id='myform2' name="myform2" action="" method="post"></form></body><script>    //四种方式    var form =document.getElementById("myform");    form =document.myform;    form =document.forms["myform"];    form =document.forms[0];    console.log(form);</script>

8.7.2.获取表单元素

8.7.2.1获取input元素

如 text password hidden textarea等，前两种常用。

1)、通过 id 获取：document.getElementById(元素 id);2)、通过 form.名称形式获取: myform.元素名称;    name属性值3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始

<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="1234"/><br />         <input type="hidden" id="uno" name="uno" value="隐藏域" />         个人说明:<textarea name="intro"></textarea>        <button type="button" onclick="getTxt();" >获取元素内容</button>     </form></body><script>     function getTxt(){         var uno = document.getElementById("uno");         var uname = myform.uname;         console.log(uname + "--------");         var upwd = document.getElementsByTagName('input')[1] ;         var intro = document.getElementsByName("intro")[0];          console.log(uno.value +"，"+ uname.value +"，"+ upwd.value +"，"+ intro.value);    }  </script>

8.7.2.2.获取单选按钮

前提：将一组单选按钮设置相同的name属性值

(1)获取单选按钮组：

document.getElementsByName("name属性值");

(2)遍历每个单选按钮，并查看单选按钮元素的checked属性

若属性值为true表示被选中，否则未被选中

选中状态设定： checked='checked'或 checked='true'或 checked

未选中状态设定：没有checked属性或 checked='false'

<form action="" name="myform">    <input type="text" name="inputName" value="aaa" />    <input type="radio" name="rad" value="1" /> 1    <input type="radio" name="rad" value="2"  /> 2</form> <script type="text/javascript">    var radios = document.getElementsByName('rad');    //radios[0].checked = 'checked'    for(var i = 0; i<radios.length; i++){        console.log(radios[i].checked + '---' + radios[i].value)    }</script>

8.7.2.3.获取多选按钮

操作方式与单选同理，不同之处在于可以多选

var ufav = document.getElementsByName("ufav");var favstr = "";    for (i = 0;i < ufav.length; i++){        if(ufav[i].checked){            favstr += ufav[i].value+",";       }   }favstr = favstr.substr(0,favstr.length-1);

8.7.2.4.取下拉选项

（1）获取 select 对象：

var ufrom = document.getElementById("ufrom");

（2）获取选中项的索引：

var idx = ufrom.selectedIndex;

（3）获取选中项 options 的 value属性值：

var val = ufrom.options[idx].value;

注意：当通过options获取选中项的value属性值时，

若没有value属性，则取option标签的内容

若存在value属性，则取value属性的值

（4）获取选中项 options 的 text：

var txt = ufrom.options[idx].text;

选中状态设定：selected='selected'、selected=true、selected

未选中状态设定：不设selected属性

<body onload="init()">    <form id='myform' name="myform" action="" method="">         来自:        <select id="ufrom" name="ufrom">            <option value="-1" >请选择</option>            <option value="0" selected="selected">北京</option>            <option value="1">上海</option>        </select><br />        <button type="button" id="sub" name="sub">提交</button>    </form></body><script>    function init () {        var sub = document.getElementById("sub");        sub.onclick = function () {            //获取select对象            var ufrom = document.getElementById("ufrom");            console.log("表单对象：" + ufrom);            //获取选中的索引            var idx = ufrom.selectedIndex;            console.log("选中项的索引值：" + idx);            //获取选中项的value值            var val = ufrom.options[idx].value;            console.log("选中项的value属性值：" + val);            //获取选中项的text            var txt = ufrom.options[idx].text;            console.log("选中项的text：" + txt);        }    }</script>

8.7.3.提交表单

（1）使用普通button按钮+onclick事件+事件中编写代码:

获取表单.submit();

（2）使用submit按钮 + οnclick="return 函数()"+函数编写代码:

最后必须返回：return true|false;

（3）使用submit按钮/图片提交按钮 + 表单οnsubmit="return 函数();"+函数编写代码:

最后必须返回：return true|false;

<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">     <input  name="test"  id="uname"/><span id="msg"></span><br />    <!--通过js事件：sub()提交表单-->    <input type="button" onclick="sub();" value="提交表单1" />    <input type="submit" onclick="return sub2();" value="提交表单2" />    <input type="submit" value="提交onsubmit" /><br />    <input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg"                  width="60px" height="40px" /></form><script type="text/javascript">     // input的type=button，调用submit()方法提交    function sub(){        document.myform2.submit();    }    // 进行校验，返回值为true才能提交    function sub2(){        var uname = document.getElementById("uname");        var val  = uname.value;        if(val.length>0){            return true; // 提交     }     document.getElementById("msg").innerHTML = "不能空着啊！！！";     document.getElementById("msg").style.color="red";     return false;  // 不提交 } // onsubmit事件提交 function onsub () {     var uname = document.getElementById("uname");     var val  = uname.value;     if(val.length>0){          return true; // 提交     }     document.getElementById("msg").innerHTML = "填写点儿东西呗！(ˉ▽￣～) 切~~";     document.getElementById("msg").style.color="red";     return false; // 不提交 }</script>

8.6.Jquery Ajax

8.6.1.$.ajax

jquery调用ajax方法：

格式：$.ajax({});

参数：

type：请求方式GET/POST
url：请求地址url
async：是否异步，默认是true表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数

get请求

$.ajax({    type:"get",    url:"js/cuisine_area.json",    async:true,    success : function (msg) {        var str = msg;        console.log(str);        $('div').append("<ul></ul>");        for(var i=0; i<msg.prices.length;i++){            $('ul').append("<li></li>");                $('li').eq(i).text(msg.prices[i]);        }    },    error : function (errMsg) {        console.log(errMsg);        $('div').html(errMsg.responseText);    }});

post请求

$.ajax({    type:"post",    data:"name=tom",    url:"js/cuisine_area.json",    contentType: "application/x-www-form-urlencoded",    async:true,    success : function (msg) {        var str = msg;        console.log(str);        $('div').append("<ul></ul>");        for(var i=0; i<msg.prices.length;i++){            $('ul').append("<li></li>");            $('li').eq(i).text(msg.prices[i]);        }    },    error : function (errMsg) {        console.log(errMsg);        $('div').html(errMsg.responseText)    }});

8.6.1.$.get

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

// 1.请求json文件，忽略返回值$.get('js/cuisine_area.json');

// 2.请求json文件，传递参数，忽略返回值$.get('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值$.get('js/cuisine_area.json',function(data){    console.log(data);});

// 4.请求json文件,传递参数,拿到返回值 $.get('js/cuisine_area.json',{name:"tom",age:100},function(data){    console.log(data);});

8.6.2.$.post

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。