第八次网页前端培训（Java Script第三次)（p40-p43、p60）

学习网址：

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

七、JS表单

1.获取表单

（1）通过form标签属性值获取表单对象

<body>
	<form id = "myform1" name = "myform1" action=""></form>
	<form id = "myform2" name = "myform2" action=""></form>
	<script type="text/javascript">
		console.log(document.getElementById("myform1"));
	</script>
</body>

（2）通过name属性值获取表单对象

<body>
	<form id = "myform1" name = "myform1" action=""></form>
	<form id = "myform2" name = "myform2" action=""></form>
	<script type="text/javascript">
		console.log(document.myform2);
	</script>
</body>

（3）通过指定下标获取表单元素

<body>
	<form id = "myform1" name = "myform1" action=""></form>
	<form id = "myform2" name = "myform2" action=""></form>
	<script type="text/javascript">
		console.log(document.forms[0]);
	</script>
</body>

（4）通过name属性值获取表单对象

<body>
	<form id = "myform1" name = "myform1" action=""></form>
	<form id = "myform2" name = "myform2" action=""></form>
	<script type="text/javascript">
		console.log(document.forms['myform2']);
	</script>
</body>

2.获取表单元素

（1）获取input元素

通过元素的id属性值获取表单元素对象
通过表单对象中对应的元素的name属性值获取
通过表单元素的name属性值获取
通过标签名获取表单元素对象

<body>

	<form id="myform3" name="myform3" action="" method="get">
		<!-- 文本框 -->
		姓名： <input type="text" name="uname" id="uname" value="zhangsan" /><br />
		<!-- 密码框 -->
		密码：<input type="password" name="upwd" id="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() {
		//
		var uname = document.getElementById("uname").value;
		console.log(uname);
		//
		var pwd =document.getElementById("myform3").upwd.value;
		console.log(pwd);
		//
		var uno = document.getElementsByName("uno")[0].value;
		console.log(uno);
		//
		var intro = document.getElementsByTagName("textarea")[0].value;
		console.log(intro);
	}
	</script>
</body>

（2）获取下拉选项

获取下拉框选项
获取下拉框选项
获取下拉框被选中项的索引
获取下拉框被选中的备选中项的值
通过选中项的下标获取下拉框被选中项的值
获取下拉框被选中项的文本

注：

获取下拉框选中项的值时：（value）

如果option标签设置了value属性值，则获取value属性对应的值；
如果option标签未设置value属性值，则获取的是option双标签中的文本值

下拉框的选中状态

选中状态：selected=selected seleted seleted = true
未选中状态：不设置selected属性、selected=false

<body>
	<form action="myform4" name="myform4" 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" onclick="getSelect()">获取下拉选项</button>
	</form>
	<script type="text/javascript">
	function getSelect() {
		//获取下拉框选项
		var ufrom = document.getElementById("ufrom");
		console.log(ufrom);
		//获取下拉框的下拉选项列表
		var opts = ufrom.options;
		console.log("选中的下标：" + index);
		//获取下拉框被选中项的索引
		var index = ufrom.selectedIndex;
		console.log("选中项的下标：" + val);
		// 获取下拉框被选中项的值
		var val = ufrom.value;
		console.log("被选中项的值："+val);
		//获取下拉框被选中的备选中项的值
		var val2 = ufrom.options[index].text;
		console.log("被选中项的值" + val2);
		//获取下拉框被选中项的文本
		var txt = ufrom.options[index].text;
		console.log("被选中项的文本：" + txt);
	}
	</script>
</body>

3.提交表单

（1）使用普通按钮button

给按钮绑定click点击事件，绑定函数
在函数中，进行表单校验
如果校验通过，则手动提交表单

<body>
	<!-- 给按钮绑定点击事件，绑定函数 -->
	<!-- 在函数中，进行表单校验 -->
	<!-- 如果校验通过，则手动提交表单 -->
	<!-- 表单对象 -->
	<form id="myform5" name="myform5" action="https://www.runoob.com/js/js-validation.html" 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">
	/*提交表单*/
	//普通按钮
	function submitForm1(){
		//校验
		var uname = document.getElementById("uname").value;
		//判断是否为空
		if (isEmpty(uname)) {//为空
		//设置提醒信息
			document.getElementById("msg").innerHTML = "姓名不能为空！";
		//阻止表单提交
			return;
		}
		//手动提交表单
		document.getElementById("myform5").submit();
	}
	/**
	 * 判断字符是否为空
	 * 如果为空，返回true
	 * 如果不为空，返回false
	 */
	function isEmpty(str) {
		//判断是否为空
		if(str == null || str.trim() ==  ""){  // trim()：去除字符串前后空格
			return true;
		}
		return false;
	}
	</script>
</body>

不输入内容时：

输入内容后打开指定网页。

（2）使用submit按钮，但最后需要返回

<body>
		<!-- 二、submit提交表单获取 -->
		<!-- 1.给按钮绑定点击事件，绑定函数 -->
		<!-- 2.函数需要有返回值，返回true或false（如果returnflase，则表单不提交 -->
		<!-- 3.在函数中，进行表单校验 -->
		<!-- 如果校验通过，返回true -->
		<form id="myform6" name="myform6" action="https://www.runoob.com/js/js-validation.html" method="get">
			姓名：<input name="uname2" id="uname2" />&nbsp;
			<span id="msg" style="font-size: :12px;color:  red;"></span><br />  <!-- 做提示 -->
			<button type="submit" onclick="return submitForm2()">提交</button>
		</form>
		<script type="text/javascript">
		function submitForm2(){
			//校验
			var uname = document.getElementById("uname2").value;
			//判断是否为空
			if (isEmpty(uname)) {//为空
			//设置提醒信息
				document.getElementById("msg").innerHTML = "姓名不能为空！";
			//阻止表单提交
				return false;
			}
			return true;
		</script>

（3）使用submit，事件写在表单当中，最后也需要返回值

操作代码同上。

八、Ajax

原生Ajax的实现流程：

（1）得到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.responseText 得到响应结果：
xhr.status ：响应状态（200=响应成功；404=资源未找到；500=服务器异常）

注：由于是异步请求，所以需要知道后台已经将请求处理完毕，才能获取响应结果

通过监听readyState的变化来得知后面的处理状态（4=完全处理;0=未处理）

xhr.onreadystatechange = function（）{

xxxxxxxxxxxxxx

}

代码展示：

JSON中的代码：

{
	"uname":"zhangsan",
	"uage":18
}

HTML中的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Ajax</title>
	</head>
	<body>
		<script type="text/javascript">
			/*同步请求*/
			function test01() {
				//得到XMLHttpRequest()对象
				var xhr = new XMLHttpRequest();
				//打开请求
				xhr.open("get","js/new_file.json",false);
				//发送请求
				xhr.send(null);
				// 判断响应状态
				if (xhr.status == 200) {
					console.log(xhr.responseText);
				} else {
					console.log("状态码" + xhr.status + "，原因：" + xhr.responseText);
				}
			}
			test01();
			console.log("============================");
			/*异步请求*/
			function test02() {
				//得到XMLHttpRequest()对象
				var xhr = new XMLHttpRequest();
				//打开请求
				xhr.open("get","js/new_file.json",true);//异步请求
				//发送请求
				xhr.send(null);
				xhr.onreadystatechange = function(){
					//当readyState的值为4时，表示结果成功响应
					if (xhr.readyState == 4) {
						// 判断响应状态
						if (xhr.status == 200) {
							//获取响应结果
							console.log(xhr.responseText);
						} else {
							console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText);
						}
					}
				}
			}
			test02();
		</script>
	</body>
</html>

均可取到JSON中的内容。

今天的文章第八次网页前端培训（Java Script第三次)（p40-p43、p60）分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/65026.html