前端第八次作业

本文详述了如何在HTML中获取表单、表单元素,如input和下拉选项,并介绍了不同方式提交表单,包括普通按钮、submit按钮的事件绑定。同时,深入浅出讲解了原生Ajax的实现流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

            获取表单
                1.document.getElementById("id属性值");
                    通过form标签的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.getElementByName("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
                

            提交表单
                一、使用普通按钮 type="button"
                    1.给按钮绑定click点击事件,绑定函数
                    2.在函数中,通过表单校验(非空校验)
                    3.如果校验通过,则手动提交表单
                        表单对象.submit();
                        
                二、使用提交按钮  type="submit"
                    1.给按钮绑定click点击事件,绑定函数
                    2.函数需要有返回值,返回true或false(return false;表单不会提交。return true;表单会提交)
                        onclick="return 函数名()"
                    3.在函数中,进行表单校验(非空校验、合法校验等)
                    4.如果校验通过,返回true,如果校验不通过,返回false
                三、使用提交按钮  type="submit"
                    1.给表单form元素绑定submit点击事件,绑定函数
                    2.函数需要有返回值,返回true或false(return false;表单不会提交。return true;表单会提交)
                        onsubmit="return 函数名()"
                    3.在函数中,进行表单校验(非空校验、合法校验等)
                    4.如果校验通过,返回true,如果校验不通过,返回false

            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 =资源未找到)
                        xhr.responseText  得到响应结果
        
        
        
        
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值