#博学谷IT学习技术支持#
目录
1.url的组成
2. 客户端与服务器的通信过程
3.ajax
3.1了解ajax
3.2jQuery中的Ajax
4.form表单
4.1form表单的组成
4.2<form>标签的属性
4.3表单的同步提交及缺点
5.art-template模板引擎
5.1 使用传统方式渲染UI结构
5.2 art-template的使用步骤
5.3 art-template标准语法
1.url的组成
URL地址一般由三部组成:
① 客户端与服务器之间的通信协议
② 存有该资源的服务器名称
③ 资源在服务器上具体的存放位置
2. 客户端与服务器的通信过程
客户端与服务器之间的通信过程,分为 请求 – 处理 – 响应 三个步骤。
网页中的每一个资源,都是通过 请求 – 处理 – 响应 的方式从服务器获取回来的。
3.ajax
3.1了解ajax
通俗的理解:在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是Ajax。
3.2jQuery中的Ajax
jQuery 中发起 Ajax 请求最常用的三个方法如下:
$.get()
jQuery 中 $.get() 函数的功能单一,专门用来发起 get 请求,从而将服务器上的资源请求到客户端来进行使用。
$.get() 函数的语法如下:
$.post()
jQuery 中 $.post() 函数的功能单一,专门用来发起 post 请求,从而向服务器提交数据。
$.post() 函数的语法如下:
$.ajax()
4.form表单
4.1form表单的组成
4.2<form>标签的属性
1. action
action 属性用来规定当提交表单时,向何处发送表单数据。
action 属性的值应该是后端提供的一个 URL 地址,这个 URL 地址专门负责接收表单提交过来的数据。
当 <form> 表单在未指定 action 属性值的情况下,action 的默认值为当前页面的 URL 地址。
注意:当提交表单后,页面会立即跳转到 action 属性指定的 URL 地址
2. target
target 属性用来规定在何处打开 action URL。
它的可选值有5个,默认情况下,target 的值是 _self,表示在相同的框架中打开 action URL。
3. method
method 属性用来规定以何种方式把表单数据提交到 action URL。
它的可选值有两个,分别是 get 和 post。
默认情况下,method 的值为 get,表示通过URL地址的形式,把表单数据提交到 action URL。
注意:
get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中,<form> 表单的 post 提交方式用的最多,很少用 get。例如登录、注册、添加数据等表单操作,都需要使用 post 方式来提交表单。
4. enctype
4.3表单的同步提交及缺点
表单的同步提交:
通过点击 submit 按钮,触发表单提交的操作,从而使页面跳转到 action URL 的行为,叫做表单的同步提交。
表单同步提交的缺点:
<form>表单同步提交后,整个页面会发生跳转,跳转到 action URL 所指向的地址,用户体验很差。
<form>表单同步提交后,页面之前的状态和数据会丢失。
解决方案:表单只负责采集数据,Ajax 负责将数据提交到服务器。
5.art-template模板引擎
5.1 使用传统方式渲染UI结构
5.2 art-template的使用步骤
导入 art-template
定义数据
定义模板
调用 template 函数
渲染HTML结构
5.3 art-template标准语法
art-template 提供了 {{ }} 这种语法格式,在 {{ }} 内可以进行变量输出,或循环数组等操作,这种 {{ }} 语法在 art-template 中被称为标准语法。
在 {{ }} 语法中,可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。