初识Ajax

#博学谷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

注意:在涉及到文件上传的操作时,必须将 enctype 的值设置为 multipart/form-data如果表单的提交不涉及到文件上传操作,则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可!

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 中被称为标准语法。

在 {{ }} 语法中,可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Ajax:Asynchronous JavaScript and XML (异步JavaScript和XML)即:...
    Welkin_qing阅读 4,079评论 0 0
  • 如何和后端交互 form表单的提交:点击submit提交,浏览器会默认自动的把input表单中的东西提交到form...
    学的会的前端阅读 2,472评论 0 0
  • 在ajax中,form表单就没有必要写action了采用ajax表单元素也没有必要有name属性提交按钮也不一定是...
    大庆无疆阅读 708评论 0 1
  •   由于JavaScript能力有限,它所提供的API都只停留在单机阶段。这样会造成一些功能无法实现,如:无法实现...
    lucky_n阅读 1,469评论 0 0
  • 1.表单的组成部分 ①表单标签 ②表单域③表单按钮 2.提交表单后会立即跳转到表单被提交到的URL地址 3.f...
    大刀劈向鬼子阅读 1,007评论 0 0