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

最新推荐文章于 2024-08-18 10:54:05 发布
最新推荐文章于 2024-08-18 10:54:05 发布
阅读量381 收藏
点赞数
文章标签： javascript 前端 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52665223/article/details/122896516
版权
这篇博客介绍了如何使用JavaScript获取和操作HTML表单元素，包括输入框、下拉选项的值，并展示了如何判断字符串是否为空以确保表单数据完整。此外，还讲解了不同方式提交表单的方法，包括普通按钮和提交按钮的使用。最后，通过Ajax实例展示了异步数据请求的基本用法。
摘要由CSDN通过智能技术生成

获取表单

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

获取表单元素 

1.获取input元素 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<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="1234" /><br>
			<input type="hidden" id="uno" name="uno" value="隐藏域" />
			个人说明：<textarea name="intro"></textarea>
			<br>
			<button type="button" onclick="getTxt()">获取元素内容</button>
		</form>
	</body>
	<script type="text/javascript">
	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);
	}
	
	</script>
</html>

2.获取下拉选项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id = "ufrom" name="uform">
			<option value="-1">请选择</option>
			<option value="0" selected="selected">北京</option>
			<option value="1">上海</option>
			<option>杭州</option>
		</select>
		<button type="button" onclick="getSelect()">获取下拉选项</button>
	</body>
	<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>
</html>

 提交表单

 1.普通按钮

  •  判断字符串是否为空

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="myform" name="myform" action="https://www.baidu.com/" method="get">
			姓名：<input name="uname" id="uname"/>&nbsp;
			<span id="msq" style="font-size: 12px;color: red;"></span><br>
			<button type="button" onclick="submitForm1()">提交</button>	
		</form>
	</body>
	<script type="text/javascript">
		function submitForm1(){
			var uname = document.getElementById("uname").value ;
			if (isEmpty(uname)){
				document.getElementById("msq").innerHTML="*姓名不能为空！";
				return;
			}
			document.getElementById("myform").submit();
		}
		function isEmpty(str) {
			if(str == null||str.trim()==""){
				return true;
			}
			return false;
		}
	</script>
</html>

 2.提交按钮1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="myform2" name="myform2" action="https://www.baidu.com/" method="get">
			姓名：<input name="uname2" id="uname2"/>&nbsp;
			<span id="msq2" style="font-size: 12px;color: red;"></span><br>
			<button type="submit"onclick="return submitForm2()">提交</button>	
		</form>
	</body>
	<script type="text/javascript">
		function isEmpty(str) {
			if(str == null||str.trim()==""){
				return true;
			}
			return false;
		}
		function submitForm2(){
			var uname2= document.getElementById("uname2").value ;
			if (isEmpty(uname2)){
				document.getElementById("msq2").innerHTML="*姓名不能为空！";
				return false;
			}
			return true;
		}
	</script>
</html>

 3.提交按钮2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<hr>
		<form id="myform3" action="https://www.baidu.com/" method="get" onclick="return submitForm3() ">
			姓名：<input name="uname3" id="uname3"/>&nbsp;
			<span id="msq3" style="font-size: 12px;color: red;"></span><br>
			<button type="submit">提交</button>	
		</form>
	</body>
	<script type="text/javascript">
		function isEmpty(str) {
			if(str == null||str.trim()==""){
				return true;
			}
			return false;
		}
		function submitForm3(){
			var uname3= document.getElementById("uname3").value ;
			if (isEmpty(uname3)){
				document.getElementById("msq3").innerHTML="*姓名不能为空！";
				return false;
			}
			return true;
		}
	</script>
</html>

Ajax

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function test02(){
				var xhr = new XMLHttpRequest();
				xhr.open("GET","js/data.json",true);
				xhr.send(null);
				if(xhr.status==200){
					console.log(xhr.responseText);
				}
				else{
					console.log("状态码："+xhr.status+"原因："+xhr.responseText);
				} 
			}
			test02();
		</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function test02(){
				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function(){
					console.log(xhr.readyState);
				}
				xhr.open("GET","js/data.json",true);
				xhr.send(null);
				if(xhr.status==200){
					console.log(xhr.responseText);
				}
				else{
					console.log("状态码："+xhr.status+"原因："+xhr.responseText);
				} 
			}
			test02();
		</script>
	</body>
</html>

 

菜鸟不是
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端笔记js和vue
09-18
### 第8章 移动Web开发重难点 - **适配问题解决方案**：使用流式布局和viewport元标签实现响应式设计。 - **Touch事件**：如何处理触摸事件，如触摸开始、触摸移动、触摸结束等。 - **过渡和动画**：移动端上的过渡...
Tracking-robot-前端开发笔记
05-28
【标题】"Tracking-robot-前端开发笔记"主要聚焦于前端技术在跟踪机器人项目中的应用。这个笔记可能包含了关于如何构建一个用户界面，用于实时显示和控制机器人的运动轨迹，以及可能涉及的数据交互和可视化技术。 ...
云笔记的项目分析(1):基本登录 前台验证
张不帅
09-18 463
登录页面的处理: 引入:util.js  判断参数是否为空 /** * 判断参数是否为空 * @param str * @returns {Boolean} */ function isEmpty(str){ if (str == null || str.trim() == "") { return true; } return false; } /** * 判断参数...
五、javascript基础
come_bn的博客
01-21 8464
一、js基础语法： 在html中写js代码要写在整个html标签后面，用script标签，alert（）；作用是弹出对话框； 代码示例： <script type="text/javascript"> // alert作用是弹出对话框，所有的js代码也要使用英文状态下的符号，小括号中可以使用英文单引号或双引号来包裹文字 alert("呵呵，看我弹出来了"); </script> 二、js找元素、标签、标记： document代表页面文档；getElementById这种
第八次网页前端培训笔记——JavaScript表单、Ajax
要银河 不要迎合
02-12 193
1.表单 表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该先在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度 2.获取表单 document.表单的name属性值； document.getElementById(“ID属性值”);//通过from标签的ID属性值获取表单对象 document.forms[表单的name属性值]； document.forms[下标]; //从 0 开始 document.f...
第八次网页前端培训笔记（js表单和Ajax原生实现）
m0_62236091的博客
02-11 445
第八次网页前端培训
第八次网页前端培训笔记（JS表单、原生Ajax实现流程）
Amazing8848的博客
02-12 439
JavaScript详细讲解，小白福利
第八次网页前端培训笔记（JS表单和Jquery Ajax）
weixin_64416967的博客
02-11 608
一.JS表单 表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该先在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。 1.获取表单 （1）document.getElementById（"ID属性值"）； 通过from标签的ID属性值获取表单对象 （2）document.表单的name属性值； 通过表单的name属性值获取表单对象 （3）document.forms[下标]； 通过指定下标获取表单元素 ...
梅科尔工作室-第八次网页前端培训笔记（JS表单与Ajax）
ayaxx1314的博客
02-12 150
前言 本文记录我学习JS表单和Jquery Ajax的笔记 1、JS表单 表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。 1.1.获取表单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第八次培训</title>
第八次网页前端培训笔记（JS表单和Jquery Ajax P40-43、P60）
Aurora_Cherish的博客
02-11 530
5、JS表单 5.1 获取表单 前两种常用： document.表单的name属性值; (通过表单的name属性值获取表单对象) document.getEiementById(“id属性值”); （(通过from标签的id属性值获取表单对象)） document.forms[表单的name属性值]; （通过表单的name属性值获取表单对象） document.forms[下标]; （通过指定下标获取表单元素） document.forms：获取HTML文档中所有...
第八次网页前端培训笔记（表单）
qq_54138079的博客
02-12 394
一，学习网址 【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili 二，安装Hbuilder编辑器 HBuilderX-高效极客技巧 三，学习表单 获取表单 document.表单id 通过form标签的id属性值获取表单对象 document.getElementById（“表单id”）； 通过表单的name属性值获取表单对象 document.form...
HTML-CSS-JS:关于前端的一些技巧
08-04
HTML-CSS-JS-Ajax-jQueryStar 曲线一、Web知识架构二、项目结构的思维导图三、清单1.... JavaScript1-嵌入JS代码的三种方式2-JS函数以及变量3-JS中的数据类型4-JS函数以及变量5-JS事件6-JS控制语句7-JS运算符值v
javaScript DOM编程艺术2版学习笔记
10-23
**第8章：DOM高级应用** 深入探讨了DOM的高级特性，如DOM遍历的更高效方法、委托事件处理、DOMContentLoaded事件、以及使用MutationObserver监控DOM变化。 **第9章：DOM和CSS** 结合CSS与DOM，讲解了如何通过...
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 301
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
网上商品订单转手系统bootpf
最新发布
weixin_43213064的博客
08-18 387
【代码】springboot网上商品订单转手系统bootpf
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 355
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1020
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值