第八次网页前端培训笔记（JS表单和Jquery Ajax P40-43、P60）

5、JS表单

5.1 获取表单

前两种常用：

• document.表单的name属性值;     (通过表单的name属性值获取表单对象)
• document.getEiementById(“id属性值”);     （(通过from标签的id属性值获取表单对象)）
• document.forms[表单的name属性值];     （通过表单的name属性值获取表单对象）
• document.forms[下标];     （通过指定下标获取表单元素）

document.forms：获取HTML文档中所有的表单对象

<form id="myform1" name="myform1" action="" ></form>
<form id="myform2" name="myform2" action="" ></form>
		
<script type="text/javascript">
	/* 获取表单 */
	// document.getEiementById(“id属性值”);
	console.log(document.getElementById("myform1"));
	// document.表单的name属性值;
	console.log(document.myform2);
	// 获取所有表单
	console.log(document.forms);
	// document.forms[下标];
	console.log(document.forms[0]);
	// document.forms[表单的name属性值];
	console.log(document.forms["myform2"]);
</script>

5.2 获取表单元素

5.2.1 获取input元素

• document.getEiementById(“id属性值”);     （通过元素的id属性值获取表单元素对象）
• 表单对象.表单元素的name属性值;     （通过表单对象中对应的元素的name属性值获取）
• document.getEiementsByName(“name属性值”);     （通过表单的name属性值获取）
• document.getEiementsByTagName(“标签名/元素名”);     （通过标签名获取表单元素对象）

/* 获取input元素 */
<form id="myform" name="myform" action="" method="post">
	/* 文本框 */
	姓名：<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() {
		// document.getEiementById(“id属性值”); 
		var uname = document.getElementById("uname").value;
		console.log(uname);
		// 表单对象.表单元素的name属性值; 
		var pwd = document.getElementById("myform").upwd.value;
		console.log(pwd);
		// document.getEiementsByName(“name属性值”); 
		var uno = document.getElementsByName("uno")[0].value;
		console.log(uno);
		// document.getEiementsByTagName(“标签名/元素名”); 
		var intro = document.getElementsByTagName("textarea")[0].value;
		console.log(intro);
	}
</script>

5.2.2 获取下拉选项

• 获取下拉框对象     var 对象 = ducument.getElementById("id属性值");
• 获取下拉框的下拉选项列表   var options = 下拉框对象.options;
• 获取下拉框被选中项的索引（即下标）   var index = 下拉框对象.selectedIndex;
• 获取下拉框被选中项的值     var 值 = 下拉框对象.value;
• 通过选中项的下标获取下拉框被选中项的值     var 值 = 下拉框对象.options[idx].value;
• 获取下拉框被选中项的文本     var 文本值 = 下拉框对象.options[idx].text;

注：

1. 获取下拉框选中项的值时：若options标签设置了value属性值则获得value属性对应的值；若options标签未设置value属性值则获得的是option双标签中的文本值
2. 下拉框的选中状态：选中状态为selected = selected、selected、selected = true；未选中状态为不设置selected属性、selected = false

<form id="myform3" name="myform3" action="" method="get">
	来自：
	<select name="ufrom" id="ufrom">
		<option value="">请选择</option>
		<option value="beijing" selected="selected">北京</option>
		<option value="shanghai">上海</option>
		<option value="hangzhou">杭州</option>
	</select>
	<button type="button" onclick="getSelect()">获取下拉选项</button>
</form>
		
<script type="text/javascript">
	function getSelect() {
		// 获取下拉框对象
		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);
	}
</script>

5.3 提交表单

5.3.1 使用普通按钮   type = "button"

1. 给按钮绑定click点击事件，绑定函数
2. 在函数中，进行表单校验（非空校验、合法性校验等）
3. 如果校验通过，则手动提交表单

<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>

<script type="text/javascript">
	/**
	 * 使用普通按钮 type = "button"
	 * 表单校验
	 * 表单提交
	 */
	function submitForm1() {
		// 得到文本框的值
		var uname = document.getElementById("uname").value;
		// 判断是否为空
		if (isEmpty(uname)) { // 为空
			// 设置表单信息（设置span元素的值）
			document.getElementById("msg").innerHTML = "* 姓名不能为空！";
			// 阻止表单提交
			return;
		}
		//手动提交表单
		document.getElementById("myform").submit();
	}
			
	/**
     * 判断字符串是否为空
	 *  如果为空，返回true
	 *  如果不为空，返回false
	 * 
	 *  trim() ： 字符串方法，去除字符串前后空格
	 * @param {object} str 
	 */
	function isEmpty(str) {
		// 判断是非为空
		if (str == null || str.trim() == "" ) {
			return true;
		}
		return false;
	}
</script>

5.3.2 使用提交按钮   type = "submit"

1. 给按钮绑定click点击事件，绑定函数
2. 函数需要有返回值，返回true或false（如果return false，则表单不会提交；如果return true或不return，则表单提交）     onclick = "return 函数名()"
3. 在函数中，进行表单校验（非空校验、合法性校验等）
4. 如果校验通过，返回true；如果校验不通过，则返回false

<form id="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" onclick="return submitForm2()" >提交</button>
</form>

<script type="text/javascript">
    /**
	 * 使用提交按钮 type = "submit"
	*/
	function submitForm2() {
		// 得到文本框的值
		var uname = document.getElementById("uname2").value;
		// 判断是否为空
		if (isEmpty(uname)) { // 为空
			// 设置表单信息（设置span元素的值）
			document.getElementById("msg2").innerHTML = "* 姓名不能为空！";
			// 阻止表单提交
			return false;
		}
		
		return true;
	}
		
	/**
	 * 判断字符串是否为空
	 *  如果为空，返回true
	 *  如果不为空，返回false
	 * 
	 *  trim() ： 字符串方法，去除字符串前后空格
	 * @param {object} str 
	 */
	function isEmpty(str) {
		// 判断是非为空
		if (str == null || str.trim() == "" ) {
			return true;
		}
		return false;
	}
</script>

5.3.3 使用提交按钮   type = "submit"

1. 给表单form元素绑定submit提交事件，绑定函数
2. 函数需要有返回值，返回true或false（如果return false，则表单不会提交；如果return true或不return，则表单提交）     onsubmit = "return 函数名()"
3. 在函数中，进行表单校验（非空校验、合法性校验等）
4. 如果校验通过，返回true；如果校验不通过，则返回false

<form id="myform3"  action="http://www.baidu.com" method="get" onsubmit="return submitForm3()">
	姓名：<input name="uname3" id="uname3" /> &nbsp; 
	<span id="msg3" style="font-size: 12px;color: red;"></span><br>
	<button type="submit" >提交</button>
</form>
		
<script type="text/javascript">
    /**
	* 使用提交按钮 type = "submit"
	* 表单绑定提交事件
	*/
	function submitForm3() {
		// 得到文本框的值
		var uname = document.getElementById("uname3").value;
		// 判断是否为空
		if (isEmpty(uname)) { // 为空
		    // 设置表单信息（设置span元素的值）
		    document.getElementById("msg3").innerHTML = "* 姓名不能为空！";
		    // 阻止表单提交
			return false;
		}
				
		return true;
	}
			
	/**
	 * 判断字符串是否为空
	 *  如果为空，返回true
	 *  如果不为空，返回false
	 * 
	 *  trim() ： 字符串方法，去除字符串前后空格
	 * @param {object} str 
	 */
	 function isEmpty(str) {
	    // 判断是非为空
		if (str == null || str.trim() == "" ) {
			return true;
		}
		return false;
	}
</script>

6、原生Ajax实现流程

异步无刷新技术

原生Ajax的实现流程：

1. 得到XMLHttpRequest对象     var xhr = new XMLHttpRequest( );
2. 打开请求     xhr.open(methed,uri,async);    async:是否异步（true表示异步，false表示同步）
3. 发送请求     xhr.send(params);    params:请求时需要传递的参数
4. 接收响应     xhr.status 响应状态(200响应成功、404资源未找到、500服务器异常)      xhr.responseText 得到响应结果