第八次网页前端培训笔记（JS表单和Jquery Ajax）

最新推荐文章于 2022-12-28 10:53:25 发布

*Sunny**

最新推荐文章于 2022-12-28 10:53:25 发布

阅读量547

点赞数 2

文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/weixin_64416967/article/details/122887247

版权

一.JS表单

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

1.获取表单

（1）document.getElementById（"ID属性值"）；

通过from标签的ID属性值获取表单对象

（2）document.表单的name属性值；

通过表单的name属性值获取表单对象

（3）document.forms[下标]；

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

（4）document.forms [表单的name属性值]；

通过表单的name属性值获取表单对象

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>获取表单</title>
	</head>
	<body>
		<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(document.forms);
			//3.document.forms[下标]；
			console.log(document.forms[0]);
			// 4.document.forms [表单的name属性值]；
			console.log(document.forms['myform2']);
		</script>
	</body>
</html>

2.获取表单元素

获取input元素

（1）document.getElementById（"ID属性值"）；

通过from标签的ID属性值获取表单元素对象

（2）表单对象.表单元素的name属性值；

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

（3）document.getElementsByName（"name属性值"）；

通过表单元素的name属性值获取

（4）document.getElementsByTagName（"标签名/元素名"）；

通过标签名获取表单元素对象

	<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="123" /><br />
			<!-- 隐藏域 -->
			<input type="hidden" id="uno" name="uno" value="隐藏域" /><br />
			<!-- 文本域 -->
			个人说明: <textarea name="in"></textarea>
			<br />
			<button type="button" onclick="gettxt();">获取元素内容</button>
		</form>
	</body>
	<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.getElementsByName（"name属性值"）
			var uno=document.getElementsByName("uno")[0].value;
			console.log(uno);
			// 4.document.getElementsByTagName（"标签名/元素名"）
			var in=document.getElementsByTagName("textarea")[0].value;
			console.log(in);
		}
	</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

	<body>
	<select id="uform" name="uform">
			<option value="-1">请选择</option>
			<option value="-1">北京</option>
			<option value="-1">上海</option>
		</select>

		<button type="button" onclick="getselect();">获取下拉选项</button>
	</body>
	<script type="text/javascript">
		function getselect() {
			// 获取下拉框对象
			var uform = document.getElementById("uform");
			console.log(uform);
			// 获取下拉框的下拉选项列表
			var opts = uform.options;
			console.log(opts);
			// 获取下拉框被选中项的索引
			var index = uform.selectedIndex;
			console.log("选中项的下标:" + index);
			// 获取下拉框被选中项的值
			var val = uform.value;
			console.log("被选中项的值:" + val);
			// 通过选中项的下标获取下拉框被选中项的值
			var val2 = uform.options[index];
			console.log("被选中项的值:" + val2);
			// 获取下拉框被选中项的文本
			var txt = uform.options[index].text;
			console.log("被选中项的值:" + txt);

		}
	</script>

3.提交表单

使用普通按钮 type = " button "（常用）

（1）给按钮绑定click点击事件，绑定函数

（2）在函数中，进行表单校验（非空校验、合法性校验等）

（3）如果校验通过，则手动提交表单

表单对象.submit（）；

使用提交按钮 type = " submit "

（1）给按钮绑定click点击事件，绑定函数

（2）函数需要有返回值，返回true或false（如果return false,则表单不会提交；如果return true或不return，则表单提交）

onclick = "return 函数名（）"

（3）在函数中，进行表单校验（非空校验、合法性校验等）

（4）如果校验通过，返回true；如果校验不通过，则返回false

使用提交按钮 type = " submit "

（1）给表单form元素绑定submit提交事件，绑定函数

（2）函数需要有返回值，返回true或false（如果return false,则表单不会提交；如果return true或不return，则表单提交）

onclick = "return 函数名（）"

（3）在函数中，进行表单校验（非空校验、合法性校验等）

（4）如果校验通过，返回true；如果校验不通过，则返回false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>提交表单</title>
	</head>
	<body>
		<!-- 使用普通按钮   type = " button " -->
		<form id="myform" name="myform" action="http://www.baidu.com" method="get">
			姓名:<input name="uname" id="uname" />&nbsp;<span id="ms"></span><br />
			<button type="button" onclick="Submit1();">提交</button>
		</form>
		<script type="text/javascript">
			// 表单校验，提交表单
			function submit1() {
				//得到文本框的值
				var uname = document.getElementById("uname").value;
				//判断是否为空
				//手动提交表单
				document.getElementById("myform").submit();
				/*
				判断字符串是否为空
				如果为空，返回true
				如果不为空，返回false
				*/
			}
			submit1();

			function isEmpty(str) {
				//判断是否为空
				if (str == null || str.trim() == "") {
					return true;
				}
				return false;
			}
		</script>
	</body>
</html>

二.Jquery Ajax

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 得到响应结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajax</title>
	</head>
	<body>
		<script type="text/javascript">
			/*同步请求*/
			function t1() {


				// 得到  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)
				}
			}
			t1();
			// function t2(){
			// 	// 得到  XMLHttpRequest  对象
			// 	var xhr = new XMLHttpRequest();
			// 	// .打开请求
			// 	xhr.open("GET","js/new_file.json",true);//异步请求
			// 	// 发送请求
			// 	xhr.send(null);
			// 	//判断响应状态
			// 	if(xhr.status == 200){
			// 		console.log(xhr.responseText);
			// 	}
			// 	else{
			// 		console.log("状态码:"+xhr.status+",原因:"+xhr.responseText)
			// 	}
			// 	t2();
			// }
		</script>
	</body>
</html>

*Sunny**

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
第八次网页前端培训笔记（JS表单和Jquery Ajax）

一.JS表单表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该先在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。1.获取表单（1）document.getElementById（"ID属性值"）；通过from标签的ID属性值获取表单对象（2）document.表单的name属性值；通过表单的name属性值获取表单对象（3）document.forms[下标]；通过指定下标获取表单元素...
复制链接

扫一扫