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.文件预览(固定方式)

5dff82f322854247945053f1cc49ba83.jpg

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

d8e8b684f651441a8004c60c78e7ff21.jpg

9.页面间传值

sessionStorage :适合传多个数据

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/395897.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java与mysql的交互_java与数据库交互常用到的一些方法

下面我整理了一下java中常用的几个与数据库交互的常用方法,仅供参考:1.执行SQL(dao层的实现类中)(1)SQL查询://import org.hibernate.Query;//import org.hibernate.Session;/*** 通过名称查找id*parampsname*returnid*/OverridepublicString…

网站 服务器 用sqlite,sqlite服务器数据库

sqlite服务器数据库 内容精选换一换简要介绍SQLite是一款轻量级的关系型数据库,它的运算速度非常快,占用资源很少,不仅支持标准的SQL语法,还遵循了数据库的ACID事务。编写语言:C一句话概述:轻量级的关系型数…

type-c接口图片_TypeC接口除了充电还能干吗?这些功能都不知道,简直是在浪费...

Type C手机接口相信每个使用智能手机的朋友都很熟悉,目前已经广泛使用在智能手机领域,并且得到用户一致好评。但是对于Type C接口真正的用处很少有人知道,大部分用户只了解正反面都可充电,其他方面一概不知,对于这一点…

Zookeeper的api的简单使用(转载)

转载自: http://www.cnblogs.com/sunddenly/p/4031881.html 1.API 2.API 示例 ZooKeeper中的组成员关系 理解ZooKeeper的一种方法就是将其看作一个具有高可用性的文件系统。但这个文件系统中没有文件和目录,而是统一使用“节点”(node)的概念,称为znode…

1.1好素数

题目 题意:一个好素数的定义是,他是一个素数,然后他的左右两边10区间内存在素数,那么他就是好素数,现在让你输入一个数字,这个数字以内的好素数的数量。 解题方法:先把每一个数字是不是素数判断…

python 矩阵获取行数_4个最佳项目创意的代码片段和示例,旨在为Python和机器学习构建出色的简历!...

点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达一篇文章带你了解4个最佳项目创意的代码片段和示例Python是一种特殊的编程语言,适用于从初学者到中级用户。由于它的灵活性,它正逐渐成为一种非常流…

Android 多状态加载布局的开发 Tips

2019独角兽企业重金招聘Python工程师标准>>> 什么是多状态 Layout 对于大多数 App 而言,项目中都有多状态加载 View 这种需求,如下图所示。 对应到开发中,我们通常会开发一个对应的自定义 layout 用于根据页面不同的状态来显示不同…

iis mysql5.7_手动配置网站环境 IIS 10+PHP 7.1+MySQL 5.7

之前配置环境一直用的一键安装包,不管是phpStudy还是lnmp,昨天尝试在自己电脑配置一下iis的环境,也踩了一些坑,整理了一下。测试电脑是Windows10,理论上Win7和IIS7.5都支持的。安装 IIS1:控制面板 > 程序…

node webkit(nw.js) 设置自动更新

原理&#xff1a;把更新的文件放在服务器上&#xff0c;设置一个客户端版本号&#xff0c;每次打开客户端的时候&#xff0c;通过接口获取服务器上的版本&#xff0c;如果高于本地的版本就下载服务器上的代码&#xff0c;低于或等于就不更新 1 <script>2 var htt…

mysql8.0版1130_navicat premium连接mysql 8.0报错error 10061和error1130问题

昨天安装了最新版的mysql navicat premium, 但没来得及测试使用Navicat连接。今天上班时&#xff0c;使用Navicat premium连接mysql时&#xff0c;出现报错ERROR 2003 (HY000): Can’t connect to MySQL server on ‘1XX.XX.XX.XX’ (10061).起初以为是mysql没有安装成功&#…

Java挂起线程

2019独角兽企业重金招聘Python工程师标准>>> 不优雅的suspend import java.util.concurrent.TimeUnit;public class SuspendTest {static Object lock new Object();SuppressWarnings("deprecation")public static void main(String[] args) {Suspend s1…

华为p4用鸿蒙系统吗_华为p40pro是鸿蒙系统吗

华为的鸿蒙OS是一款“面向未来”的操作系统&#xff0c;一款基于微内核的面向全场景的分布式操作系统&#xff0c;此前mate30系列并没有搭载鸿蒙系统。那华为p40pro是鸿蒙系统吗&#xff1f;品牌型号&#xff1a;华为p40pro华为p40pro是鸿蒙系统吗&#xff1f;华为p40pro没有搭…

Web优化 --利用css sprites降低图片请求

sprites是鬼怪&#xff0c;小妖精&#xff0c;调皮鬼的意思&#xff0c;初听这个高端洋气的名字我被震慑住了&#xff0c;一步步掀开其面纱后发觉非常easy的东西。作用却非常大 什么是CSS Sprites CSS Sprites是指把网页中非常多小图片&#xff08;非常多图标文件&#xff09;做…

mysql取消mvvc机制_MySQL探秘(六):InnoDB一致性非锁定读

一致性非锁定读(consistent nonlocking read)是指InnoDB存储引擎通过多版本控制(MVVC)读取当前数据库中行数据的方式。如果读取的行正在执行DELETE或UPDATE操作&#xff0c;这时读取操作不会因此去等待行上锁的释放。相反地&#xff0c;InnoDB会去读取行的一个快照。上图直观地…

APP应用 HTTP/1.0中keep-alive

在HTTP/1.0中keep-alive不是标准协议&#xff0c;客户端必须发送Connection:Keep-Alive来激活keep-alive连接。https://www.imooc.com/article/31231HTTP协议是无状态的协议&#xff0c;即每一次请求都是互相独立的。因此它的最初实现是&#xff0c;每一个http请求都会打开一个…

安装mysql8._安装MySQL8(附详细图文)

安装MySQL8(附详细图文)删除mysql服务&#xff1a;mysqld -remove mysql1、下载 mysql 8下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/2、配置 mysql 配置文件打开 mysql 8 的安装目录&#xff1a;my.ini注意设置自己对应的 mysql 安装目录 和数据存放目录[mysq…

win10安装windows live writer 错误:OnCatalogResult:0x80190194

到官网下载了一个在线安装程序&#xff0c;可是一运行就提示无法安装&#xff0c;显式错误“OnCatalogResult:0x80190194”&#xff0c;如下图所示 找到windows live安装程序的安装日志文件。具体位置是&#xff1a;C:\Users\All Users\Microsoft\WLSetup\Logs 需要下载安装文件…

TZOJ--5480: 孤衾易暖 // POJ--3735 Training little cats (矩阵快速幂)

5480: 孤衾易暖 时间限制(普通/Java):1000MS/3000MS 内存限制:65536KByte 描述 哇&#xff0c;好难&#xff0c;我要放弃了(扶我起来&#xff0c;我还能A 寒夜纵长&#xff0c;孤衾易暖&#xff0c;钟鼓渐清圆。 生活也许有些不如意的地方&#xff0c;但是没有什么是拥有一…

IntelliJ IDEA2017 修改缓存文件的路径

IDEA的缓存文件夹.IntelliJIdea2017.1&#xff0c;存放着IDEA的破解密码&#xff0c;各个项目的缓存&#xff0c;默认是在C盘的用户目录下&#xff0c;目前有1.5G大小。现在想要把它从C盘移出。 在IDEA的安装路径下中&#xff0c;进入bin目录后找到属性文件&#xff1a;idea.pr…

python字符串后面添加字符串_什么是字符串?怎样在Python中添加字符串?

字符串是一种表示文本的数据类型&#xff0c;字符串中的字符可以是ASCII字符、各种符号以及各种Unicode字符。Python中的字符串有如下三种表现方式。第1种方式&#xff1a;使用单引号包含字符。示例代码如下&#xff1a;a 123注意&#xff0c;单引号表示的字符串里不能包含单引…