ajax拼接显示不同样式,Ajax重点整理

Ajax工作流程

Ajax:在不刷新页面的情况下向服务器请求数据

1.创建XMLHttpRequest对象(俗称小黄人)

var xhr = new XMLHttpRequest();

XMLHttpRequest ： http请求对象，负责实现ajax技术

2.设置请求

xhr.open('get', 'url');

url:服务器地址

3.发送请求

xhr.send();

4.注册回调函数

xhr.onload = function () {

console.log(xhr.responseText);

}

xhr.responseText:请求返回的内容

这个函数不是立即执行的，而是等服务器把数据响应返回才会执行(PS：什么时候执行取决于你的网速快慢)

get请求

案例:英雄外号

接口文档：查询英雄外号

请求地址：https://autumnfish.cn/api/hero/simple

请求方法：get

请求参数：name

1.get传参格式：url?key=value

2.示例： https://autumnfish.cn/api/hero/simple?name=亚索

Documenttitle>

text-align: center;

}

.name {

color: deepskyblue;

}

.title {

color: red;

}style>

head>

英雄查询h1>

span>---span>h2>

body>

html>

/*

- 请求地址：https://autumnfish.cn/api/hero/simple

- 请求方法：get

- 请求参数：name

- 响应内容：英雄外号

*/

/*思路分析

1.给search按钮注册点击事件

2.获取hero输入框文本

3.通过ajax调用接口：参数为输入框文本

4.数据返回之后显示到title标签中

*/

//1.注册点击事件

$('.search').on('click', function () {

//2.获取输入框文本

var heroName = $('.hero').val();

//3.ajax请求数据

//(1).实例化ajax对象

var xhr = new XMLHttpRequest();

//(2).设置请求方法和地址

//get请求的数据直接添加在url的后面 格式是 url?key=value

xhr.open('get', 'https://autumnfish.cn/api/hero/simple?name=' + heroName);

//(3).发送请求

xhr.send();

//(4).注册回调函数

xhr.onload = function() {

$('.title').text(heroName + ':' + xhr.responseText);

};

});script>

post请求

案例:用户注册

请求地址：https://autumnfish.cn/api/user/register

请求方法：post

请求参数：username

post请求：

1.需要设置请求头(固定语法)：xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’)

* 注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴

2.使用xhr的send方法发送参数： xhr.send(‘参数名=参数值’);

* 注意：不要加前面的?

Documenttitle>

color: red;

}style>

head>

用户注册h2>

span>

body>

html>

/*

请求方法get和post区别： 传参方式不同

get请求： 直接在url后面拼接参数

* 参数在url中，安全性不高

post请求：

1.需要设置请求头(固定语法)：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

* 注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴

2.使用xhr的send方法发送参数： xhr.send('参数名=参数值');

* 注意：不要加前面的?

*/

/*

用户注册

- 请求地址：https://autumnfish.cn/api/user/register

- 请求方法：post

- 请求参数：username

1. 注册点击事件 : submit

2. 获取输入框文本：username

3. 通过ajax调用接口：参数为输入框文本

4. 数据返回之后显示到info中

*/

$(function () {

//1.注册点击事件

$('.submit').on('click', function () {

//2.获取输入框文本

var username = $('.username').val();

//3.ajax发送请求

//(1).实例化ajax对象

var xhr = new XMLHttpRequest();

//(2).设置请求方法和地址

xhr.open('post', 'https://autumnfish.cn/api/user/register');

//(3).设置请求头(post请求才需要设置)

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

//(4).发送请求 ： 参数格式 'key=value'

xhr.send('username=' + username);

//(5).注册回调函数

xhr.onload = function () {

$('.info').text(xhr.responseText);

};

});

});script>

请求方法get和post区别

传参方式不同

get请求：

直接在url后面拼接参数

* 参数在url中，安全性不高

post请求：

1.需要设置请求头(固定语法)：xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’)

* 注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴

2.使用xhr的send方法发送参数： xhr.send(‘参数名=参数值’);

* 注意：不要加前面的?

JSON数据格式解析

JSON格式

通用的数据格式，很多语言都支持，不同语言中解析他的方式不同

js中对应JSON的使用 2个方法

JSON是一种数据格式，本质是字符串 作用： 解决跨平台的问题，一般服务器返回的数据都是json格式

JSON格式特点 a. 属性名和属性值都是字符串(需要使用双引号包括)

b. 如果属性值是布尔类型和数字类型，则可以省略字符串

.JSON格式与JS对象互转

JSON->JS : JSON.parse(json数据)

JS->JSON ：JSON.stringify(js对象)

模板引擎art-template

模板引擎art-template使用流程

1.导入模板引擎art-template.js文件

2.写HTML模板

模板写到script标签中

必须要设置id

必须要设置type(一般为 type=“text/html”)

3.调用art-template的官方API开始解析模板

var htmlStr = template('tpl', jsonObj.data);

第一个参数： html模板的id名

第二个参数： 要渲染的数据

返回值： 渲染数据之后的html字符串

4.将解析好的模板显示到页面

document.body.innerHTML = htmlStr;

模板引擎语法介绍

输出

标准语法

{{value}}

{{data.key}}

{{data['key']}}

{{a ? b : c}}

{{a || b}}

{{a + b}}

原始语法

条件

标准语法

{{if value}} ... {{/if}}

{{if v1}} ... {{else if v2}} ... {{/if}}

原始语法

...

... ...

循环

标准语法

{{each target}}

{{$index}} {{$value}}

{{/each}}

原始语法

ajax 项目经验总结

1.模板引擎支持字符串的方法 indexOf() split()

2.如果一段代码在多个地方执行,可以使用函数封装

可以自己写一个函数封装

事件本事就是一种函数封装,可以主动触发事件

$().click

$().trigger(‘click’)

3.loading加载效果

布局思路:使用gif动图实现

实现思路:ajax之前出现 ajax响应后消失

4.模板引擎的数据可以是ajax响应返回的,也可以是自己写的

5.模板引擎的数据并不是全部都是替换操作html() , 也有可能是append()添加操作。取决于需求

6.非空判断与文本清空

非空判断:ajax发送之前

文本清空:ajax发送之后

7.文件预览(固定方式)

8.文件上传(固定方式)

9.页面间传值

sessionStorage :适合传多个数据

window.location.href:适合传少量数据