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