Ajax 基础第三章

Posted 2021-04-15 codekrist

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了 Ajax 基础第三章相关的知识，希望对你有一定的参考价值。

模板引擎概述

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

使用步骤

第一步我们要下载

【 Ajax 】基础第三章

第二步引入到HTML页面

 <script ></script>

第三步准备art-tempalate 模板

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

第四步告诉模板引擎要将哪一个模板和哪一个数据进行拼接

- 第一个参数是模板ID 有了它你就知道当前的模板引擎使用哪个模板

- 第一个参数是对象就是在HTML页面中展示的数据

 <script type="text/javascript">      var html = template('tp1', { username: 'codekrist', password: 123 })
</script>

第五步将拼接好的字符串添加到页面中

- 使用当前ID作为包裹容器

 document.getElementById('app').innerHTML = html

第六步通过模板语法告诉模板引擎，数据和html字符串要如何拼接

 <script type="text/html" id="tp1"> <h1>{{username}}{{password}}</h1></script>

示例：

<!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> <!-- 将模板引擎的库引入到当前页面 --> <script ></script></head>
<body> <div id="app"></div> <!-- 准备art-template模板 --> <script type="text/html" id="tp1"> <h1>{{username}}{{password}}</h1></script> <script type="text/javascript"> // 告诉模板引擎将哪个数据类型和哪个模板进行拼接 //方法的返回值就是拼接好的html字符串 var html = template('tp1', { username: 'codekrist', password: 123 }) console.log(html) document.getElementById('app').innerHTML = html</script>
</body>
</html>

【 Ajax 】基础第三章

根据前两章的教学我们现在开始做几个案例也是为了补上昨天的要求

案例

需求 :

【 Ajax 】基础第三章

案例思路

1- 获取文本框并为其添加离开焦点事件

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

示例：

* 使用bootstrap框架让你页面显得好看

<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>验证邮箱案例</title> <link rel="stylesheet" href="./css/bootstrap.css"> <link rel="stylesheet" href="./css/input.css"></head>
<body> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputEmail">邮箱</label> <div class="controls"> <input type="text" id="inputEmail" placeholder="邮箱地址"> <div id="info" class="error"></div> </div> </div> </form></body>

.form-horizontal { width: 400px; margin-top: 40px;}
.control-group { text-align: center;}.error{ float: left; color: crimson; font-size: 12px;}.succeed{ float: left; color: rgb(43, 180, 8); font-size: 12px;}

【 Ajax 】基础第三章

1- js代码

* 获取页面中的元素

 var inputEmail = document.getElementById('inputEmail'); var info = document.getElementById('info');

2- 给文本框添加离开焦点事件 onblur

* 检测事件是否正常运行

 inputEmail.onblur = function () {     console.log(1) }

【 Ajax 】基础第三章

3- 获取文本框输入的value值

var email = this.value;

4- 使用正则

var reg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-z]{2,}$");

5- 如果用户输入的邮箱不符合规则

 if (!reg.test(email)) {   // 阻止程序向下执行    info.innerHTML = '请输入符合规则的邮箱地址',// 文本在页面显示改文字    info.className = 'error'// 样式 为error类名 return // 阻止程序向下执行   }

6- 如果用户输入的邮箱符合规则

 info.innerHTML = '邮箱正确', // 文本在页面显示改文字 info.className = 'succeed' // 样式 为error类名

以上是关于 Ajax 基础第三章的主要内容，如果未能解决你的问题，请参考以下文章

Ajax 基础第三章

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

AJAX相关JS代码片段和部分浏览器模型

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

Ajax 基础 第三章

Ajax 基础第三章