验证邮箱唯一性省市区三级联动搜索框内容自动提示笔记（ajax第二天）

最新推荐文章于 2024-08-31 21:34:08 发布

开心市民小顾

最新推荐文章于 2024-08-31 21:34:08 发布

阅读量229

点赞数

文章标签： ajax node.js

本文链接：https://blog.csdn.net/qq_45433707/article/details/105688150

版权

获取文本框并为其添加离开焦点事件
离开焦点时，检测用户输入的邮箱地址是否符合规则
如果不符合规则，阻止程序向下执行并给出提示信息
向服务器端发送，检验邮箱地址是否被别人注册
根据服务器返回值决定客户端显示何种提示信息

创建服务器

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const bodyParer = require('body-parser');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
app.get('/verifyEmailAdress', (req, res) => {
    var email = req.query.email;
    console.log(email);
    if (email == "itheima@itcast.cn") {
        res.status(400).send({ message: "邮箱地址已经注册过了，请更换邮箱地址" });
        console.log(message);
    } else {
        res.send({ message: "恭喜，邮箱地址可用" });
    }
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

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() {}
    };
    // 使用defaults对象中的属性覆盖defaults对象中的属性
    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);
    // 判断请求参数
    if (defaults.type == 'get') {
        defaults.url = defaults.url + '?' + params;
    }
    // console.log(params);
    // 配置ajax对象  因为不确定 函数传参传递
    xhr.open(defaults.type, defaults.url);
    // 如果请求方式post
    if (defaults.type == 'post') {
        var contentType = defaults.header['Content-Type'];
        // 设置请求参数格式要求
        xhr.setRequestHeader('Content-Type', contentType);
        // 判断用户希望的请求参数格式
        // 如果类型为json
        if (contentType == 'application/json') {
            // 向服务器端传递json数据格式参数
            xhr.send(JSON.stringify(defaults.data));
        } else {
            // 向服务器端传递普通类型的参数
            xhr.send(params);
        }
    } else {
        xhr.send();
    }
    // 监听xhr对象下面的onload事件
    // 当xhr对象接收完响应数据后触发
    xhr.onload = function() {
        // 获取响应头中的数据
        // console.log(xhr.getResponseHeader('Content-Type'));
        var contentType = xhr.getResponseHeader('Content-Type');
        // 服务器端返回的数据
        var responseText = xhr.responseText;
        // 响应类型
        if (contentType.includes('application/json')) {
            // console.log('包含');
            responseText = JSON.parse(responseText);
        }
        // console.log();
        // http状态码判断(为200的时候 请求成功调用成功情况的函数)
        if (xhr.status == 200) {
            defaults.success(responseText, xhr);
        } else {
            // 请求失败
            defaults.error(responseText, xhr);
            // console.log(xhr);
        }

    }
}

html文件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <style>
        p:not(:empty) {
            padding: 15px;
        }
        
        .container {
            padding-top: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <label for=""> 邮箱地址</label>
            <input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
        </div>
        <!-- 错误bg-danger  正确bg-success -->
        <p id="info"></p>
    </div>
    <script src="/js/ajax.js"></script>
    <script>
        // 获取页面元素、
        var emailInp = document.getElementById('email');
        var info = document.getElementById('info');
        // 当文本框离开焦点
        emailInp.onblur = function() {
            // 获取用户输入的邮箱地址
            var email = this.value;
            // 验证邮箱地址的正则表达式
            var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            // 判断邮箱地址是否规则
            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.message);
                    info.innerHTML = result.message;
                    info.className = 'bg-success';
                },
                error: function(result) {
                    console.log(result.message);
                    info.innerHTML = result.message;
                    info.className = 'bg-danger';
                }
            });
        }
    </script>
</body>

</html>

；；；；；

这里面我用bootstrap框架，但是我在使用路径时出错了，ajax.js文件可以引进去，但是bootstrap就是不行，我后面再看看吧，还好我晓得网页链接：

https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css

还有就是服务器启动了，有时候重启一下服务器；（有时候不是代码错误，网页刷新也没用，就重启下）；

省市区：

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

<head>
    <meta charset="UTF-8">
    <title>搜索框输入文字自动提示</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 150px;
        }
    </style>
</head>
<!-- 
    1.通过接口获取省份信息
    2.使用javascript获取到省市区下拉框元素
    3.将服务器端返回的省份信息显示在下拉框中
    4.为下拉框元素添加表单值改变事件（onchange）
    5.当用户选择省份时，根据省份id获取城市信息
    6.当用户选择城市时，根据城市id获取县城信息
 -->

<body>
    <div class="container">
        <div class="form-inline">
            <div class="form-group">
                <select class="form-control" id="province">
                    <option>请选择省份</option>
                </select>

            </div>
            <div class="form-group">
                <select class="form-control" id="city">
                    <option>请选择城市</option>
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" id="area">
                    <option>请选择县城</option>
                </select>
            </div>
        </div>
    </div>
    <script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>

    <!-- 省份模板 【模板id不要和遍历的数据对象同名】-->
    <script type="text/html" id="provinceTpl">
        <option>请选择省份</option>
        {{each province}}
        <!-- $value是 循环中的每一项 -->
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>

    <!-- 城市模板 -->
    <script type="text/html" id="cityTpl">
        <option>请选择城市</option>
        {{each city}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>

    <!-- 县城模板 -->
    <script type="text/html" id="areaTpl">
        <option>请选择县城</option>
        {{each area}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>

    <script>
        // 获取省市区下拉框元素
        var province = document.getElementById('province');
        var city = document.getElementById('city');
        var area = document.getElementById('area');

        // 获取省份信息
        ajax({
            type: 'get',
            url: 'http://localhost:3000/province',
            success: function(data) {
                // 将服务器端返回的数据和html进行拼接
                var html = template('provinceTpl', {
                    province: data
                });
                province.innerHTML = html; // 将拼接好的html字符串显示在页面中
            }
        });

        // 为省份的下拉框添加值改变事件
        province.onchange = function() {
            var pid = this.value; // 获取省份id
            // 清空县城下拉框中的数据
            var html = template('areaTpl', {
                area: []
            });
            area.innerHTML = html;

            // 根据省份id获取城市信息
            ajax({
                type: 'get',
                url: '/cities',
                data: {
                    id: pid
                },
                success: function(data) {
                    var html = template('cityTpl', {
                        city: data
                    });
                    city.innerHTML = html;
                }
            })
        };

        // 当用户选择城市的时候
        city.onchange = function() {
            var cid = this.value; // 获取城市id
            // 根据城市id获取县城信息
            ajax({
                type: 'get',
                url: 'http://localhost:3000/areas',
                data: {
                    id: cid
                },
                success: function(data) {
                    var html = template('areaTpl', {
                        area: data
                    });
                    area.innerHTML = html;
                }
            })
        }
    </script>
</body>

</html>

搜索框内容自动提示

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>搜索框内容自动提示</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 150px;
        }
        
        .list-group {
            display: none;
        }
    </style>
</head>
<!-- 1.获取搜索框并为其添加用户输入事件
        2.获取用户输入关键字
        3.向服务器端发送请求并携带关键字作为请求参数
         4.将响应数据显示在搜索框底部-->

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

            </ul>
        </div>
    </div>

    <!-- script -->
    <script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>
    <script type="text/html" id="tpl">
        {{each result}}
        <li class=list-group-item>{{$value}}</li>
        {{/each}}
    </script>
    <script type="text/javascript">
        //获取搜索框  searchInp
        var searchInp = document.getElementById('search');
        //获取提示文字的存放文字  listBox
        var listBox = document.getElementById('list-box');

        //存储定时器的变量
        var timer = null;

        //当用户在文本框中输入的时候触发 s.οninput=function()
        searchInp.oninput = function() {
            //清除上一次开启的定时器
            clearTimeout(timer);

            //获取用户输入的内容 key =this.value(s.value)
            var key = this.value;
            //如果用户没有再搜索框中输入内容
            if (key.trim().length == 0) {
                //将提示下拉框隐藏掉
                listBox.style.display = "none";
                //阻止程序向下执行
                return;
            }
            timer = setTimeout(function() {
                //向服务器端发送请求
                //向服务器端索取和用户输入关键字相关的内容
                ajax({
                    type: 'get',
                    url: 'http://localhost:3000/searchAutoPrompt',
                    data: {
                        key: key
                    },
                    success: function(result) {
                        //console.log(result);
                        //使用模板引擎拼接字符串
                        var html1 = template("tpl", {
                                result: result
                            })
                            //将拼接好的字符串显示在页面中
                        listBox.innerHTML = html1;
                        //显示ul容器
                        listBox.style.display = "block";
                    }
                })
            }, 800)

        }
    </script>
</body>

</html>

看到一篇一样学习历程的博主：Zmongo；比我写的详细

开心市民小顾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
验证邮箱唯一性省市区三级联动搜索框内容自动提示笔记（ajax第二天）

创建服务器// 引入express框架const express = require('express');// 路径处理模块const path = require('path');const bodyParer = require('body-parser');// 创建web服务器const app = express();// 静态资源访问服务功能app.use(expr...
复制链接

扫一扫