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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容

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