1.视频链接

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

2. 教程链接

JavaScript 表单 | 菜鸟教程 (runoob.com)

3. JS表单

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

3.1 获取表单

前两种常用

1、document .表单名称
2、 document.getElementById(表单id);

3.document.forms[表单名称]
4、 document.forms[索引];//从0开始

<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("---------");console.log(document.forms);console.log(document.forms[0]);</script></body>

3.2 获取表单元素

3.2.1 获取input元素

如text password hidden textarea等，前两种常用。
1)、通过id 获取: document.getElementById(元素id);

2)、通过form .名称形式获取:myform .元素名称;name属性值
3)、通过name 获取:document.getElementsByName( name属性值)[索引] //从0开始

4)、通过 tagName 数组:document.getElementsByTagName( " input')[索引] //从0开始

3.3 提交表单

(1)使用普通button按钮+onclick事件+事件中编写代码:

获取表单.submit();
(2）使用submit按钮+οnclick="return 函数()"+函数编写代码:

最后必须返回: return true|false;
(3）使用submit按钮/图片提交按钮＋表单οnsubmit="return函数();"+函数编写代码:

最后必须返回: return true|false;

3.4 获取下拉选项

(1）获取select 对象
var ufrom = document .getElementById( "ufrom" ) ;

(2）获取选中项的索引
var idx = ufrom.selectedIndex;

(3）获取选中项options的value 属性值

var val = ufrom. options[ idx ] .value;
注意:当通过options获取选中项的value属性值时，
若没有value属性，则取option标签的内容若存在value属性，则取value属性的值

(4）获取选中项options的text :
var txt = ufrom . options[ idx ].text;
选中状态设定: selected='selected"'、 selected=true、selected未选中状态设定:不设selected属性

<body><select id="ufrom" name="ufrom"><option value="">请选择</option><option value="beijing" selected="selected">北京</option><option value="shanghai">上海</option><option >杭州</option></select><br /><button type="button" onclick="getSelect()">获取下拉选项</button><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></body>

4.jQuery Ajax

4.1.$.ajax

jquery调用ajax方法:
        格式: $.ajax(0);
                参数:
                        type:请求方式GET/POSTurl:请求地址url
                        async:是否异步，默认是true表示异步data:发送到服务器的数据
                        dataType:预期服务器返回的数据类型contentType:设置请求头
                        success:请求成功时调用此函数error:请求失败时调用此函数
                        get请求

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

第八次网页前端培训(JavaScript)相关推荐

第八次网页前端培训（JS）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibilin 1.安装编译器 HBuilder X:HB ...
第八次网页前端培训笔记
B站视频网址:(本次仅涉及P40-P43和P60)[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 菜 ...
网页前端培训（HTML）
1.安装编译器网址:HBuilderX-高效极客技巧选择windows标准版 2. HTML基础学习网址: 1.HTML 基础 | 菜鸟教程 2.[优极限] HTML+CSS+JavaScrip ...
网页前端培训笔记（HTML标签）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili HTML 教程 | 菜鸟教程 (runoob.com) ...
第六次网页前端培训（JavaScript）
1. 视频链接 [优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 2. 教程链接 JavaScript 运算符 | ...
网页前端培训笔记第八课
视频: [优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili js表单 <!DOCTYPE html> & ...
第五次网页前端培训（JavaScript）
JavaScript 1主要内容 1.1简介 js是面向对象,解释型的语言.基于对象与事件驱动并具安全性的客户端脚本语言.主要目的:验证发往服务端的数据,增加web互动,增加用户体验度等 js组成(E ...
第六次网页前端培训笔记（JavaScript）
1.运算符 2.数组 2.1.数组定义 2.1.1.隐式定义 var 数组名 = []; //空数组 var 数组名 = [值1,值2,值3.....]; //内部值可以任意类型 2.1.2.直接实例 ...
梅科尔工作室-第五次网页前端培训（JS，JavaScript）
js学习包括:(*为重点) 基础语法:语句与注释,标识符与关键字,*变量,数据类型,类型转换,运算符,控制语句,*数组,*函数,内置对象,*对象事件:*事件类型,事件流和事件模型,事件处理程序 BO ...

第八次网页前端培训(JavaScript)