Ajax重点整理

最新推荐文章于 2023-04-11 17:54:47 发布

aaa_Gyt

最新推荐文章于 2023-04-11 17:54:47 发布

阅读量339

点赞数

分类专栏：学习总结文章标签： Ajax

本文链接：https://blog.csdn.net/aaa_Gyt/article/details/103252821

版权

学习总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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=亚索

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }

        .name {
            color: deepskyblue;
        }

        .title {
            color: red;
        }
    </style>
</head>

<body>
    <h1>英雄查询</h1>
    <input type="text" placeholder="请输入查询的名字" class="hero" />
    <input type="button" value="英雄查询" class="search" />
    <h2><span class="name"></span>---<span class="title"></span></h2>
</body>

</html>
<script src="./libs/jquery-1.12.4.min.js"></script>
<script>
    /*
      - 请求地址：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(‘参数名=参数值’);
* 注意：不要加前面的?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        .info {
            color: red;
        }
    </style>
</head>
<body>
    <h2>用户注册</h2>
    <input type="text" placeholder="请输入注册的用户名" class="username" />
    <span class="info"></span>
    <br />
    <input type="button" value="注册" class="submit" />
</body>
</html>
<script src="./libs/jquery-1.12.4.min.js"></script>
<script>
    /* 
    请求方法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='tpl' type="text/html"></script>

模板写到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}}

原始语法

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

条件
标准语法

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

原始语法

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

循环
标准语法

{{each target}}
    {{$index}} {{$value}}
{{/each}}

原始语法

<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

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:适合传少量数据

aaa_Gyt

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax重点整理

Ajax工作流程Ajax:在不刷新页面的情况下向服务器请求数据1.创建XMLHttpRequest对象(俗称小黄人)var xhr = new XMLHttpRequest();XMLHttpRequest ： http请求对象，负责实现ajax技术2.设置请求xhr.open('get', 'url');url:服务器地址3.发送请求xhr.send();4.注册回调函...
复制链接

扫一扫