Ajax学习应用---邮箱地址唯一性验证

最新推荐文章于 2022-12-12 18:19:54 发布

兰兰的风吖

最新推荐文章于 2022-12-12 18:19:54 发布

阅读量447

点赞数

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

本文链接：https://blog.csdn.net/pilgrim_121/article/details/116652130

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现效果：
在这里插入图片描述

步骤一：
1 test.js

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();
//path.join()拼接路径
console.log(path.join(__dirname, 'static'));


// 实现静态资源访问功能
app.use(express.static(path.join(__dirname, 'static')))

app.get('/verifyEmailAdress', (req, res) => {
    // 接收客户端传递过来的邮箱地址
    const email = req.query.email;
    // 判断邮箱地址注册过的情况
    if (email == 'itheima@itcast.cn') {
        // 设置http状态码并对客户端做出响应
        res.status(400).send({ message: '邮箱地址已经注册过了, 请更换其他邮箱地址' });
    } else {
        // 邮箱地址可用的情况
        // 对客户端做出响应
        res.send({ message: '恭喜, 邮箱地址可用' });
    }
});


// 端口监听
app.listen(3000);

console.log('服务器启动成功');

执行test.js
在这里插入图片描述
2 ajax.js

function ajax(options) {
    // 默认值
    var defaults = {
            type: 'get',
            url: '',
            async: true,
            data: {},
            header: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function() {},
            error: function() {}
        }
        // 使用用户传递的参数替换默认值参数
    Object.assign(defaults, options);
    // 创建ajax对象
    var xhr = new XMLHttpRequest();
    // 参数拼接变量
    var params = '';
    // 循环参数
    for (var attr in defaults.data) {
        // 参数拼接
        params += attr + '=' + defaults.data[attr] + '&';
        // 去掉参数中最后一个&
        params = params.substr(0, params.length - 1)
    }
    // 如果请求方式为get
    if (defaults.type == 'get') {
        // 将参数拼接在url地址的后面
        defaults.url += '?' + params;
    }

    // 配置ajax请求
    xhr.open(defaults.type, defaults.url, defaults.async);
    // 如果请求方式为post
    if (defaults.type == 'post') {
        // 设置请求头
        xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
        // 如果想服务器端传递的参数类型为json
        if (defaults.header['Content-Type'] == 'application/json') {
            // 将json对象转换为json字符串
            xhr.send(JSON.stringify(defaults.data))
        } else {
            // 发送请求
            xhr.send(params);
        }
    } else {
        xhr.send();
    }
    // 请求加载完成
    xhr.onload = function() {
            // 获取服务器端返回数据的类型
            var contentType = xhr.getResponseHeader('content-type');
            // 获取服务器端返回的响应数据
            var responseText = xhr.responseText;
            // 如果服务器端返回的数据是json数据类型
            if (contentType.includes('application/json')) {
                // 将json字符串转换为json对象
                responseText = JSON.parse(responseText);
            }
            // 如果请求成功
            if (xhr.status == 200) {
                // 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
                defaults.success(responseText, xhr);
            } else {
                // 调用失败回调函数并且将xhr对象传递给回调函数
                defaults.error(responseText, xhr);
            }
        }
        // 当网络中断时
    xhr.onerror = function() {
        // 调用失败回调函数并且将xhr对象传递给回调函数
        defaults.error(xhr);
    }
}

3.email.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .danger {
            background-color: pink;
        }
        
        .success {
            background-color: green;
        }
    </style>
</head>

<body>
    <div>
        <label for="email">邮箱：</label>
        <input type="text" id="email" placeholder="请输入邮箱地址" id="email">
        <span id="tip"></span>
    </div>
    <script src="js/ajax.js"></script>
    <script>
        // 获取页面中的元素
        var emailInp = document.querySelector('#email');
        var tipInfo = document.querySelector('#tip');

        emailInp.onblur = function() {

            // 用户输入的邮箱地址
            var email = this.value;
            // 邮箱验证正则表达式
            var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
            // 邮箱格式验证
            if (!reg.test(email)) {
                // 用户提示
                tipInfo.innerHTML = '邮箱地址格式不符合要求';
                tipInfo.className = 'danger';
                // 阻止程序向下执行
                return;
            }
            // 向服务器端发送请求
            // 验证邮箱地址是否已经被注册
            ajax({
                type: 'get',
                url: 'http://localhost:3000/verifyEmailAdress',
                data: {
                     //第一个email：必须的固定字段，第二个email：用户输入的内容
                    email: email
                },
                success: function(result) {
                    tipInfo.innerHTML = result.message;
                    tipInfo.className = 'success';
                },
                error: function(result) {
                    tipInfo.innerHTML = result.message;
                    tipInfo.className = 'danger';
                }
            })

        }
    </script>
</body>

</html>

4 各个文件目录结构
在这里插入图片描述
5 浏览器运行：输入localhost:3000/email.html即可

兰兰的风吖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习应用---邮箱地址唯一性验证

实现效果：步骤一：1 test.js// 引入express框架const express = require('express');// 路径处理模块const path = require('path');// 创建web服务器const app = express();//path.join()拼接路径console.log(path.join(__dirname, 'static'));// 实现静态资源访问功能app.use(express.static(path.j
复制链接

扫一扫