ajax 小案例

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

1. 获取文本框并为其添加失去焦点的事件。
2. 首先进行前端验证用户的输入是否符合邮箱地址格式要求。
3. 如果不符合要求给出提示信息并阻止程序向下执行（不发送 ajax 请求）。
4. 如果符合要求则向服务器端发送 ajax 请求，后端检测邮箱地址是否已被占用。
5. 根据服务器端的检测结果和响应在客户端给出相应的提示。

邮箱验证规则 /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Aa-z\d]+[-.])+[A-Za-z\d]{2,4}$/

具体实现代码：

<!-- 页面HTML文档，结构省略，只贴js脚本部分代码 -->
<!-- 引入自己封装的ajax函数 -->
<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 = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Aa-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
        // 如果前端验证不通过
        if (!reg.test(email)) {
            info.innerHTML = '请输入有效的邮箱地址！！';
            info.className = 'error';
            // 必须阻止程序向下运行
            return;
        } else {
            // 如果前端验证通过则利用前面封装的ajax函数发送ajax请求
            ajax({
                data: {
                    email: email
                },
                url: 'http://localhost:80/emailAdress',
                success: function(result) {
                    info.innerHTML = result.message;
                    info.className = 'success';
                },
                error: function(result) {
                    info.innerHTML = result.message;
                    info.className = 'error';
                }
            })
        }
    }
</script>

// 服务器端：邮箱地址唯一性验证
app.get('/emailAdress', (req, res) => {
    // 接收客户端传递过来的email参数
    const email = req.query.email;
    // 使用单个数据模拟数据库数据访问判断邮箱地址是否被占用
    if (email == 'tkop@qq.com') {
        res.status(400).send({ message: '邮箱地址已被占用！！' });
    } else {
        res.send({ message: '邮箱地址可用！' });
    }
})

结果：

案例 2 ：搜索框内容自动提示

1. 获取搜索框并为其添加用户输入事件（input 事件）。
2. 每次输入内容都获取用户输入的关键字。
3. 将关键字作为请求参数向服务器端发送 ajax 请求。
4. 将服务器端响应的数据显示在搜索框底部。

具体实现代码：

<!-- 页面HTML文档，结构省略，只贴js脚本部分代码 -->
<!-- 引入相关js文件 -->
<script src="/js/ajax.js"></script>
<script src="/js/template-web.js"></script>
<!-- 模板拼接 -->
<script id="tpl" type="text/html">
    {{each result}}
    <li class="list-group-item">{{$value}}</li>
    {{/each}}
</script>
<!-- 内部js脚本 -->
<script>
    // 获取相关元素
    var searchInp = document.getElementById('search');
    var listBox = document.getElementById('list-box');
    // 命名定时器
    var timer = null;
    // 绑定事件
    searchInp.oninput = function() {
        // 清除上一个定时器
        clearTimeout(timer);
        var keyword = this.value;
        if (keyword.trim().length == 0) {
            listBox.style.display = 'none';
            return;
        };
        timer = setTimeout(function() {
        	// 发送ajax请求
            ajax({
                url: 'http://localhost:80/searchAutoPrompt',
                data: {
                    keyword: keyword
                },
                success: function(result) {
                    const html = template('tpl', {
                        result: result
                    });
                    listBox.innerHTML = html;
                    listBox.style.display = 'block';
                },
                error: function(result, xhr) {
                    console.log(xhr);
                }
            })
        }, 800);
    }
</script>

由于每次输入（即使是拼音输入法，每点击一个拼音就是一次输入）都会触发 input 事件，所以为了防止频繁发送 ajax 请求所以进行了节流。

// 服务器端：输入框关键字提示
app.get('/searchAutoPrompt', (req, res) => {
    // 获取前端输入的关键字
    const keyword = req.query.keyword;
    // 使用数组模拟数据库数据访问并返回数据
    const list = [
        '我很强我知道',
        '我是很强的男人',
        '前端编程',
        '自学前端需要注意什么',
        '自学前端的人很强',
        '加油坚持',
        '坚持才能成功',
        '我是tkop'
    ];
    // 处理结果
    let result = list.filter(item => {
        return item.includes(keyword);
    });
    res.send(result);
})

结果：

案例 3 ：省市区三级联动

1. 通过接口获取省份信息。
2. 通过 javaScript 获取到省市区下拉框元素。
3. 将服务器返回的省份信息显示在下拉框中。
4. 为下拉框元素添加表单值改变事件（onchange）。
5. 当用户选择省份时，根据省份 id 获取城市信息。
6. 当用户选择城市市，根据城市 id 获取县城信息。