08-JavaScript表单和Jquery Ajax

目录

1.获取表单

2.获取表单元素

（1）获取input元素

（2）获取下拉选项

3.提交表单

4.$.ajax

（1）jquery调用ajax方法

（2）原生Ajax的实现流程

---

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

1.获取表单

// 通过表单的name属性值获取表单对象
document.表单名称

// 通过from标签的id属性值获取表单对象
document.getElementById(表单id);

// 通过表单的name属性值获取表单对象
document.forms[表单名称]

// 通过指定下标获取表单元素
document.forms[索引];  // 从θ开始

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

2.获取表单元素

（1）获取input元素

// 通过表单元素的id属性值获取
document.getElementById("id属性值");

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

// 通过表单元素的name属性值获取
document.getElementsByName("name属性值")[索引]  // 从0开始

// 通过标签名/元素名获取表单元素对象
document.getElementsByTagName('标签名/元素名')[索引]  // 从0开始

（2）获取下拉选项

获取下拉框对象：

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

获取下拉框的下拉选项列表：

var options = 下拉框对象.options; 

获取下拉框被选中项的索引：

var index = 下拉框对象.selectedIndex;

获取下拉框被选中项的值：

var 值 = 下拉框对象.value;

通过下拉框被选中项的下标获取下拉框被选中项的值： 

var 值 = 下拉框对象.options[idx].value;

注意：

        当通过options获取选中项的value属性值时，若没有value属性，则取option标签的内容；若存在value属性，则取value属性的值。

获取下拉框被选中项的文本：

var txt = ufrom.options[idx].text;

        选中状态设定：selected='selected'、selected-true、selected
        未选中状态设定：不设selected属性

3.提交表单

使用普通button按钮+onclick事件+事件中编写代码：

        （1）给按钮绑定click点击事件，绑定函数
        （2）在函数中，进行表单校验（非空校验、合法性校验等）
        （3）如果校验通过，则手动提交表单
        表单对象.submit();

使用submit按钮+按钮οnclick="return 函数()"+函数编写代码：

        （1）给按钮绑定click点击事件，绑定函数
        （2）函数需要有返回值，返回true或false（如果return false，则表单不会提交；如果return true或不return，则表单提交）
        （3）在函数中，进行表单校验（非空校验、合法性校验等）
        （4）如果校验通过，返回true；如果校验不通过，则返回false
        最后必须返回：return true/false;

使用submit按钮/图片提交按钮+表单οnsubmit="return 函数();"+函数编写代码：

        （1）给表单form元素绑定submit提交事件，绑定函数
        （2）函数需要有返回值，返回true或false（如果return false，则表单不会提交；如果return true或不return，则表单提交）
        （3）在函数中，进行表单校验（非空校验、合法性校验等）
        （4）如果校验通过，返回true；如果校验不通过，则返回false
        最后必须返回：return true/false;

4.$.ajax

（1）jquery调用ajax方法

格式：

$.ajax({});

参数：
        type：请求方式GET/POST
        url：请求地址url
        async：是否异步，默认是true表示异步
        data：发送到服务器的数据
        dataType：预期服务器返回的数据类型
        contentType：设置请求头
        success：请求成功时调用此函数
        error：请求失败时调用此函数

（2）原生Ajax的实现流程

得到XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

打开请求：

xhr.open(method, uri, async);

        method：请求方式，通常是GET|POST
        uri：请求地址
        async：是否异步。如果是true表示异步， false表示同步

发送请求：

xhr.send(params);

        params：请求时需要传递的参数
                如果是GET请求，设置nul（GEt请求的参 数设置在ur1后面）；
                如果是POST请求，无参数设置为null，有参数则设置参数。

接收响应：

        xhr.status响应状态（200=响应成功，404=资源未找到，500=服务器异常）；
        xhr.responseText得到响应结果。