视频：
【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
js表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS表单</title>
</head>
<body>
<!--
获取表单
1. document.getElementById("id属性值");
通过from标签的id属性值获取表单对象
2. document.表单的name属性值;
通过表单的name属性值获取表单对象
3. document.forms[下标];
通过指定下标获取表单元素
4. document.forms[表单的name属性值];
通过表单的name属性值获取表单对象
document.forms:获取HTML文档中所有的表单对象
获取表单元素
1.获取input元素
1. document.getElementById(""id属性值");
通过元素的id属性值获取表单元素对象
2．表单对象.表单元素的name属性值;
通过表单对象中对应的元素的name属性值获取
3. document.getELementsByName( "name属性值");
通过表单元素的name属性值获取
4. document.getELementsByTagName("标签名/元素名");
通过标签名获取表单元素对象
获取下拉选项
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
-->
<form id="myform1" name="myform1" action=""></form>
<form id="myform2" name="myform2" action=""></form>
<form action="" method="get" id="myform" name="myform">
<!-- 文本框 -->
姓名:<input type="text" name="uname" id="uname" value="zs" /><br>
<!-- 密码框 -->
密码:<input type="password" name="upwd" id="upwd" value="1234" /><br>
<!-- 隐藏域 -->
<input type="hidden" name="uno" id="uno" value="隐藏域" />
<!-- 文本域 -->
个人说明:<textarea name="intro"></textarea>
<br>
<button type="button" onclick="getTxt()">获取元素内容</button>
<br>
来自:
<select id="ufrom" name="ufrom">
<option value="-">请选择</option>
<option value="Beijing" selected="selected">北京</option>
<option value="Shanghai">上海</option>
<option >杭州</option>
<option value="1">上海</option> </select>
<button type="button" onclick="getSelect()">获取下拉选项</button>
</form>
<script type="text/javascript">
/*获取表单 */
//1. document.getElementById("id属性值");
console.log(document.getElementById("myform1"));
//2. document.表单的name属性值;
console.log(document.myform2);
console.log("-------------------")
//获取所有表单对象
console.log(document.forms);
//3. document.forms[下标];
console.log(document.forms[0]);
//4. document.forms[表单的name属性值];
console.log(document.forms['myform2']);
/*获取表单元素*/
function getTxt(){
//1. document.getElementById(""id属性值");
var uname = document.getElementById("uname").value;
console.log(uname);
//2. document.表单的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 intro = document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}
/*
获取下拉选项
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
*/
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>
Jquery Ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery Ajax</title>
</head>
<body>
<!--
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·得到响应结果
-->
<script type="text/javascript">
/*同步请求*/
function test01(){
// 得到XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr.readyState);
//打开请求
xhr.open("get","data.json",false);//同步请求
console.log(xhr.readyState);
//发送请求
xhr.send(null);
console.log(xhr.readyState);
//判断响应状态
if(xhr.status == 200) {
console.log(xhr.responseText);
}
else{
console.log("状态码: " + xhr.status + ",原因: " + xhr.responseText);
}
console.log("同步请求...");
}
//同步请求
// test01();
/*异步请求*/
function test02(){
// 得到XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//打开请求
xhr.open("get","data.json",true);//异步请求
//发送请求
xhr.send(null);
/*
由于是异步请求，所以需要知道后台已经将请求处理完毕，才能获取响应结果
通过监听readyState的变化来得知后面的处理状态 4 = 完全处理
xhr.onreadyStatechange = function(){
}
*/
xhr.onreadystatechange = function(){
//当readyState的值为4时，表示结果成功响应
if(xhr.readyState == 4) {
//判断响应状态
if(xhr.status == 200) {
console.log(xhr.responseText);
}
else{
console.log("状态码: " + xhr.status + ",原因: " + xhr.responseText);
}
}
}
console.log("异步请求...");
}
//异步请求
test02();
</script>
</body>
</html>
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
