Ajax03-模块引擎概述+FormData+JSONP同源策略+跨域

养只羊驼妮

已于 2022-11-03 11:54:21 修改

阅读量276

点赞数

分类专栏： Ajax 文章标签： ajax

于 2022-11-03 10:56:11 首次发布

本文链接：https://blog.csdn.net/m0_57726319/article/details/126341737

版权

标签的属性

01.模块殷勤概述

01.模板引擎概述__哔哩哔哩_bilibili

作用：使用模块引擎提供的模板语法，可以将数据和HTML拼接起来。

官方地址：http://aui.github.io/art-template/zh-cn/index.html

使用步骤

1.下载art-template模板引擎库文件并在HTML页面中引入库文件

<script src='../public/template-web.js'></script>

2.准备art-template模板

<script id="tpl" type="text/html">
        <h1></h1>
    </script>

由于客户端java script不具备读取文件的能力，所以在客户端模板不是一个单独的文件，而是html文件中的一段代码片段，且用<script></script>标签包裹
<script>标签需要一个id属性作为模板唯一标识
<script>标签内部写html语法，但由于编辑器会将内部内容作为<script>语法进行解析，所以在<script>标签上添加type=text/html属性

3.告诉模块引擎将哪一个模板和哪个数据进行拼接

 var html = template('tpl', {username: 'zhangsan', age: 30});

4.将拼接好的html字符串添加到页面中

<div id="container"></div>

document.getElementById('container').innerHTML = html;

5.通过模板语法告诉模块引擎，数据和html字符串要如何拼接

<script id="tpl" type="text/html">
        <h1>{
  {username}} {
  {age}}</h1>
    </script>

完整代码演示

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 将模板引擎的库文件引入到当前页面 -->
    <script src='../public/template-web.js'></script>
</head>

<body>
    <div id="container"></div>
    <!-- 准备art-template模板 -->
    <script id="tpl" type="text/html">
        <h1>{
  {username}} {
  {age}}</h1>
    </script>
    <script type="text/javascript">
        //告诉模板引擎将哪个数据和哪个模板进行拼接
        //1)模板id   2）数据  对象类型
        //方法的返回值就是拼接好的html字符串
        var html = template('tpl', {
            username: 'zhangsan',
            age: 30
        });
        document.getElementById('container').innerHTML = html;
    </script>
</body>

02.案例：验证邮箱地址唯一性

02.案例：验证邮箱地址唯一性__哔哩哔哩_bilibili

分析

1.获取文本框并添加离开焦点事件

2.离开焦点时，检测用户输入的邮箱地址是否符合规则（正则表达式）

3.如果不符合规则，阻止程序向下进行并给出提示信息

4.向服务器端发送请求，检测邮箱地址是否被别人注册

5.根据服务器返回值决定客户端显示何种提示信息

<body>
    <div class="container">
        <div class="form-group">
            <label>邮箱标签</label>
            <input type="email" class="form-control" placeholder="请输入邮箱地址">
            <!-- 错误 bg-danger    正确 bg-success -->
            <p id="info"></p>
        </div>
    </div>
</body>
<script src="../js/ajax.js"></script>
<script>
    //获取元素
    var emailInp = document.querySelector('.form-control');
    var info = document.getElementById('info');
    //注册事件，离开焦点事件
    emailInp.onblur = function() {
        //获取用户输入的邮箱地址
        var email = this.value;
        //验证邮箱地址的正则表达式
        var reg = /^[\da-z]+([\-\.\_]?[\da-z]+)*@[\da-z]+([\-\.]?[\da-z]+)*(\.[a-z]{2,})+$/;
        //如果用户输入的邮箱地址不符合规则
        if (!reg.test(email)) {
            info.innerHTML = '请输入符合规则的邮箱地址';
            //修改提示信息的样式为错误信息的样式
            info.className = 'bg-danger';
            //阻止程序向下执行
            return;
        }


        //向服务器发送请求
        ajax({
            type: 'get',
            url: 'http://localhost:3000/verifyEmailAdress',
            data: {
                email: email
            },
            success: function(result) {
                console.log(result);
                info.innerHTML = result.message;
                info.className = 'bg-success';
            },
            error: function(result) {
                console.log(result);
                info.innerHTML = result.message;
                info.className = 'bg-danger';
            }
        });

    };
</script>

03.案例：搜索框内容自动提示（1）

03.案例：搜索框内容自动提示01__哔哩哔哩_bilibili

分析：

获取搜索框并为其添加用户输入事件

获取用户输入的关键字

向服务器端发送请求并携带关键字作为请求参数

将响应数据显示在搜索框底部

<body>
    <div class="container">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入关键字搜索">
            <ul class="list-group">

            </ul