第八次网页前端培训笔记

已于 2022-02-12 15:07:37 修改
阅读量362 收藏
点赞数
分类专栏： 网页前端 文章标签： 前端 javascript html
于 2022-02-11 18:53:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66154365/article/details/122885667
版权

获取表单（前两种常用）

1、document.getElementById（"id属性值"）

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

<from id="myform1" name="myform1" action=""></from>

<script type="text/javascript">console.log(document.getElementById("myform1"));</script>

2、document.表单的name属性值

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

<from id="myform2" name="myform2" action=""></from>

<script type="text/javascript">console.log(document,myform2);</script>

3、document.forms[下标]

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

4、document.forms[表单的name属性值]

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

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

获取表单元素

1、获取input元素

（1）document.getElementById("id属性值")

通过元素的id属性值获取表单元素对象

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

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

（3）document.getElementByName（"name属性值"）

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

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

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

2、获取单选按钮

注：相同的一组单选按钮，需要设置相同的name属性值

（1）document.getElementByName（"name属性值"）

通过name属性值获取

（2）判断单选按钮是否选中

checked选中状态

在JS代码中，checked=true表示选中，checked=false表示不选中

在HTML标签中，checked=checked或checked表示选中，不设置checked属性表示不选中

（3）获取单选按钮的值

元素.value;

3、获取多选按钮

与单选按钮相同

4、获取下拉选项

（1）获取下拉框对象

var对象=document.getElementById("id属性值")

（2）获取下拉框的下拉选项列表

var options=下拉框对象.options;

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

var index = 下拉框对象.selectedIndox;

（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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from id="myform1" name="myform1" action=""></from>
		<from id="myform2" name="myform2" action=""></from>

		<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="intro"></textarea>
			<br />
			<button type="button" onclick="getTxt();">获取元素内容</button>

			<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">
			console.log(document.getElementById("myform1"));
			console.log(document, myform2);
			console.log("-----------");
			console.log(document.forms);
			console.log(document.forms[0]);
			console.log(document.forms['myform2']);

			function getTxt() {
				var uname = document.getElementById("uname").value;
				console.log(uname);
				var pwd = document.getElementById("myform").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);

			}

			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>

	</body>
</html>

提交表单

一、使用普通按钮 type="button"

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

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

3、如果校验通过，则手动提交表单   表单对象.submit

二、使用提交按钮 type="submit"

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

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

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

4、如果校验通过，返回true，如果校验不通过，则返回false

三、使用提交按钮 type="submit"

1、给表单from元素绑定submit提交事件，绑定函数

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

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

4、如果校验通过，返回true，如果校验不通过，则返回false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<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 />
		<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>
		<hr />
		<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">
			function SubmitForm1(){
				var uname=document.getElementById("uname").value;
				if (isEmpty(uname)){
					document.getElementById("msg").innerHTML="*姓名不能为空";
				}
				
				document.getElementById("myform").submit();
			}
			function isEmpty(str){
				if(str == null||str.trim() ==""){
					return true;
				}
				return false;
			}
			function SubmitForm2(){
				var uname=document.getElementById("uname2").value;
				if (isEmpty(uname)){
					document.getElementById("msg2").innerHTML="*姓名不能为空";
					return false;
				}
				return true;
			}
			function SubmitForm3(){
				var uname=document.getElementById("uname3").value;
				if (isEmpty(uname)){
					document.getElementById("msg3").innerHTML="*姓名不能为空";
					return false;
				}
				return true;
			}
		</script>
		
		
	</body>
</html>

Ajax------异步无刷新技术

原生Ajax的实现流程

1、得到XMLHttpRequest();

var xhr = new XMLHttpRequest();

2、打开请求

xhr.open(method,url,async);

method 请求方式，通常是get|post

url 请求地址

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></title>
	</head>
	<body>
		<script type="text/javascript">
			function text01() {
				var xhr = new XMLHttpRequest();
				xhr.open("get", "js/date.json", false);
				xhr.send(null);
				if (xhr.status == 200) {
					console.log(xhr.responseText);
				} else {
					console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText)
				}
				console.log("同步请求...");
			}

			function text02() {
				var xhr = new XMLHttpRequest();
				xhr.open("get", "js/date.json", true);
				xhr.send(null);
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4){
						if (xhr.status == 200) {
							console.log(xhr.responseText);
						} else {
							console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText)
						}
					}
				}
				
				console.log("异步请求...");
			}
			text02();
		</script>
	</body>
</html>

来源自：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibiliicon-default.png?t=M0H8https://www.bilibili.com/video/BV1sf4y1k7dr?p=61&spm_id_from=pageDriver

劲劲龙
关注
专栏目录
第八次网页前端培训笔记（javascript表单）
qq_66148728的博客
02-14 357
一、表单 二、获取表单元素-input元素 三、获取表单元素-单选与多选按钮 四、获取下拉选项 五、提交表单
表单和FormData对象
liangx的博客
12-16 848
表单，FormData 对象 表单概述 表单（<form>）用来收集用户提交的数据，发送到服务器。比如，用户提交用户名和密码，让服务器验证，就要通过表单。表单提供多种控件，让开发者使用，具体的控件种类和用法请参考 HTML 语言的教程。本章主要介绍 JavaScript 与表单的交互。 <form action="/handling-page" method="post"> <div> <label for="name">用户名：</labe
【JS】常用的判断数组，对象，字符串为空的方式
Zeng__Yi的博客
09-11 2705
一般在项目中会经常使用到判断语句（if判断，三目判断），针对的主要是数组，对象，字符串是否为空。 一，数组：[] 数组是否为空的判断：Arr.length 二，字符串：'',null,undefined 所以要全面的判断一个字符串是否为空，通常使用一个函数： function isEmpty(str){ if(str===''||str===null||str===unde...
第八次网页前端培训笔记（表单）
qq_54138079的博客
02-12 420
一，学习网址 【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili 二，安装Hbuilder编辑器 HBuilderX-高效极客技巧 三，学习表单 获取表单 document.表单id 通过form标签的id属性值获取表单对象 document.getElementById（“表单id”）； 通过表单的name属性值获取表单对象 document.form...
第八次网页前端培训笔记（JavaScript）
m0_66811674的博客
02-26 326
B站
第八次网页前端培训笔记（js表单）
m0_61169431的博客
02-12 483
1.获取表单 2.获取表单元素 3.提交表单 4.Ajax <body> <form id='myform' name="myform" action="http://baidu.com" method="get"> 姓名：<input name="uname" id="uname"/> &nbsp; <span id="msg" style="font-size:12px;color:red;"...
第八次网页前端培训笔记(JS)JS表单
qq_14809847的博客
02-15 383
1.获取表单 2.获取表单元素 3.获取下拉选项 4.提交表单 5.快速入门
第八次网页前端培训笔记（JS表单/Ajax）
m0_52665223的博客
02-12 394
获取表单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form id="myform1" name="myform1" action=""></form> <form id="myform2" name="myform2" a.
第八次网页前端培训笔记（js表单和Ajax原生实现）
m0_62236091的博客
02-11 455
第八次网页前端培训
斑码教育大前端课堂笔记-css第一天
11-24
【CSS第一天】——斑码教育大前端课堂笔记详解 斑码教育是专注于IT技术培训的机构，其在前端开发领域的教学资源备受关注。本篇笔记是斑码教育sy101课程的第一天内容，主要围绕CSS（Cascading Style Sheets）展开，...
Vue基础培训案例笔记素材等全套课程课件资料.zip
05-04
通过这套Vue基础培训案例笔记素材，你将能够从理论到实践全面了解Vue.js，并具备独立开发Vue项目的技能。无论是对前端开发感兴趣的新手，还是寻求技术进阶的开发者，这都将是一份宝贵的参考资料。
Vue基础+vue电商项目培训案例笔记素材等全套课程课件及软件源代码资料.zip
05-27
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过学习和研究这些课件、笔记和源代码，可以掌握Vue.js的使用技巧以及如何将其应用于电商项目中，从而提升自己的前端开发技能。
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 377
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
easyexcel模板导出并且公式自动计算的方法
weixin_47615289的博客
09-11 431
【代码】easyexcel模板导出并且公式自动计算的方法。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 1351
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
测试ASP.NET Core的WebApi项目调用WebService
最新发布
gc_2299的博客
09-15 314
记录在WebApi中调用WebService的基本方式。
《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》
asd4353012的博客
09-06 1819
响应式 Web 设计是现代网页设计的重要趋势，它可以确保网页在不同设备上都能提供良好的用户体验。在实现响应式 Web 设计时，需要掌握媒体查询、弹性布局、流式布局等技术，同时还需要遵循一些最佳实践，如优先考虑移动设备、保持简洁的布局、优化图像和媒体资源、使用响应式字体和提供良好的用户体验等。响应式 Web 设计可以确保网页在不同设备上都能呈现出最佳的布局和样式，满足用户的需求。在实现响应式 Web 设计后，需要在不同的设备上进行测试，确保网页在各种设备上都能正常显示和交互。可以使用响应式字体技术，如。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 908
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
前端开发笔记：HTML与CSS基础详解
"这篇前端学习笔记涵盖了HTML基础和CSS基础的知识点，持续更新，旨在帮助学习者系统地掌握前端开发的基础技能。" 在HTML基础部分，笔记提到了以下几个关键概念： 1. `img`标签的`alt`属性：当图片无法加载时，`alt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

劲劲龙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值