第八次网页前端培训笔记——JavaScript表单、Ajax

头秃小程

已于 2023-01-28 16:11:34 修改

阅读量195

点赞数

分类专栏：网页前端文章标签： javascript 前端开发语言

于 2022-02-12 22:11:04 首次发布

本文链接：https://blog.csdn.net/Maruko_428/article/details/122900474

版权

网页前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

2.使用提交按钮 type = " submit "

3.使用提交按钮 type = " submit "

5.Ajax

1.表单

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

2.获取表单

document.表单的name属性值；
document.getElementById(“ID属性值”);//通过from标签的ID属性值获取表单对象
document.forms[表单的name属性值]；
document.forms[下标]; //从 0 开始

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

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

3.获取表单元素

1.获取input元素

document.getElementById("id属性值")
表单对象.表单元素的name属性值
document.getElementsByName("name属性值")[下标] // 从0开始
document.getElementsByTagName("标签名/元素名")[下标] // 从0开始

		<!-- 获取表单元素 -->
		<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="隐藏域" /><br>
			<!-- 文本域 -->
			个人说明: <textarea name="in"></textarea><br>
			<button type="button" onclick="getTxt();">获取元素内容</button>
		</form>
	
		<script type="text/javascript">
			function getTxt(){
				// document.getElementById("id属性值")；
				var name = document.getElementById("uname").value;
				console.log(uname);
				// 表单对象.表单元素的name属性值
				var pwd = document.getElementById("myform").upwd.value;
				console.log(pwd);
				// document.getElementsByName("name属性值")
				var uno = document.getElementsByName("uno")[0].value;
				console.log(uno);
				// document.getElementsByTagName("标签名/元素名")
				var intro =  document.getElementsByTagName("textarea")[0].value;
				console.log(intro);	
			}
		</script>

.value:获取当前类的值

2.获取下拉选项

获取下拉框对象

var 对象 = document.getElementById（"ID属性值"）；

获取下拉框的下拉选项列表

var options = 下拉框对象.options；

获取下拉框被选中项的索引

var index = 下拉框对象.selectedIndex；

获取下拉框被选中项的值

var 值 = 下拉框对象.value；

通过选中项的下标获取下拉框被选中项的值

var 值 = 下拉框对象.options [ index ].value；

获取下拉框被选中项的文本

var 文本值 = 下拉框对象.options [ index ].text；

注：

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

如果option标签设置了value属性值，则获取value属性对应的值

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

2、下拉框的选中状态

选中状态：selected=selected、selected、selected=true

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

		<!-- 获取下拉选项 -->
		<form>
				<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>
		</form>
		
		<script type="text/javascript">
			function getSelect(){
				// 获取下拉框对象
				var ufrom = document.getElementById("ufrom");
				console.log(ufrom);
				// 获取下拉框的下拉选项列表
                var options = ufrom.options;
                console.log(ufrom);
				// 获取下拉框被选中项的索引
                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>

4.提交表单

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

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

表单对象.submit（）；

2.使用提交按钮 type = " submit "

给按钮绑定click点击事件，绑定函数
函数需要有返回值，返回true或false（如果return false,则表单不会提交；如果return true或不return，则表单提交）

onclick = "return 函数名（）"

在函数中，进行表单校验（非空校验、合法性校验等）
如果校验通过，返回true；如果校验不通过，则返回false

3.使用提交按钮 type = " submit "

给表单form元素绑定submit提交事件，绑定函数
函数需要有返回值，返回true或false（如果return false,则表单不会提交；如果return true或不return，则表单提交）

onclick = "return 函数名（）"

在函数中，进行表单校验（非空校验、合法性校验等）
如果校验通过，返回true；如果校验不通过，则返回false

5.Ajax

Ajax:异步不刷新技术

原生Ajax的实现流程

得到XMLHttpRequest对象

 var xhr = new XMLHttpRequest();

打开请求

 xhr.open(method,url,async);

method：请求方式，通常是GET|POST
url：请求地址
async：是否异步，如果是true表示异步，false表示同步

发送请求

    xhr.send(params);

params：请求时需要传递的参数

如果是GET请求，设置null

如果是POST请求，无参数设置为null，有参数则设置参数

接收响应

xhr.status 响应状态（200-响应成功，400-资源未找到，500-服务器异常）
xhr.responseText 得到响应结果

头秃小程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第八次网页前端培训笔记——JavaScript表单、Ajax

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

扫一扫

专栏目录