Ajax（二）-- form 表单与模板引擎

1. form 表单的基本使用

        1.1 什么是表单

                表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并通过

标签的提交操作把采集到的信息提交到服务器端进行处理。

                 

         1.2 表单的组成部分

                

                 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

        1.3 标签的属性

                 标签用来采集数据， 标签的属性则是用来规定如何把采集到的数据发送到服务器。

                

                 1.3.1 action

                        action 属性用来规定当提交表单时，向何处发送表单数据。

                        action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。

                        当 表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。

                        注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址

                1.3.2 target

                        target 属性用来规定在何处打开 action URL。

                        它的可选值有 5 个，默认情况下，target 的值是 _self ,表示在相同的框架中打开 action URL。

                        

                1.3.3 method

                        method 属性用来规定以何种方式把表单数据提交到 action URL。

                        它的可选值有两个，分别是 get 和 post。

                        默认情况下，method 的值为 get,表示通过 URL 地址的形式，把表单数据提交到 action URL。

                        注意：

                                get 方式适合用来提交少量的、简单的数据。

                                post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。

                                在实际开发中， 表单的 post 提交方式用的最多，很少用 get。例如登绿、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。

                1.3.4 enctype

                        enctype 属性用来规定在发送表单数据之前如何对数据进行编码。

                        它的可选值有三个，默认情况下，enctype 的值为 application/x-www-form-urlencoded,表示在发送前编码所有的字符。

                        

                         注意：

                                在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/.form-data

                                如果表单的提交不涉及到文件上传操作，则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可！

        1.4 表单的同步提交及缺点

                1.4.1 什么是表单的同步提交

                        通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。

                1.4.2 表单同步提交的缺点

                        ① 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。

                        ② 表单同步提交后，页面之前的状态和数据会丢失。

                        思考：如何解决上述两个问题？

                1.4.3 如何解决表单同步提交的缺点

                        如果使用表单提交数据，则会导致以下两个问题：

                                ① 页面会发生跳转

                                ② 页面之前的状态和数据会丢失

                        解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器。

2. 通过 Ajax 提交表单数据

        2.1 监听表单提交事件

                 在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件：

                

        2.2 阻止表单默认提交行为

                当监听到表单的提交事件以后，可以调用事件对像的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转，示例代码如下：

                

        2.3 快速获取表单中的数据

                2.3.1 serialize() 函数

                        为了简化表单中数据的获取操作，jQuery 提供了 serialize() 函数，其语法格式如下：

                        

                        serialize() 函数的好处：可以一次性获取到表单中的所有的数据。

                2.3.2 serialize() 函数示例

                        

                         

                         注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！

3. 案例：评论列表

        3.1 渲染 UI 结构

                

4. 模板引擎的基本概念

5. art-template 模板引擎

6. 模板引擎的实现原理