前端交互技术实战-优快云博客

本文详细介绍如何使用前端技术实现邮箱地址验证、搜索框自动提示、省市区三级联动及二进制文件上传等功能，涵盖多种实用场景。

文章目录

验证邮箱地址是否已经注册

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>验证邮箱地址是否已经注册</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style type="text/css">
    p:not(:empty) {
      padding: 15px;
    }

    .container {
      padding-top: 100px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="form-grounp">
      <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 = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
      // 如果用户输入的邮箱地址不符合规则
      if (!reg.test(email)) {
        info.innerHTML = '请输入符合规则的邮箱地址'
        // 让提示信息显示为错误提示信息的样式
        info.className = 'bg-danger'
        // 阻止程序向下执行
        return
      }
      // 向服务器端发送请求
      ajax({
        type: 'get',
        url: 'http://localhost:3000/verifyEmailAddress',
        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>
</body>
</html>

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);
  }
}

搜索框内容自动提示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>搜索框输入文字自动提示</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <style type="text/css">
    .container {
      padding-top: 150px;
    }
    .list-group {
      display: none;
    }
  </style>
</head>
<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 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>
    // 获取搜索框
    var searchInp = document.getElementById("search")
    // 获取提示文字的存放容器
    var listBox = document.getElementById('list-box')
    // 存储定时器的变量
    var timer = null;
    // 当用户在文本框中输入的时候触发
    searchInp.oninput = function(){
      // 清除上一次开启的定时器
      clearTimeout(timer)
      // console.log(1);
      // 获取用户输入的内容
      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 html = template('tpl',{
            result:result
          })
          // 将拼接好的字符串显示在页面中
          listBox.innerHTML = html
          // 显示ul容器
          listBox.style.display = 'block'
        }
      })
      },800)
    }
  </script>
</body>
</html>

实现省市区三级联动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>省市区三级联动</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <style type="text/css">
    .container{
      padding-top: 150px;
    }
  </style>
</head>
<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>
  <!-- 省份模板 -->
  <script type="text/html" id="provinceTpl">
    <option>请选择省份</option>
    {{each province}}
      <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 city}}
      <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})
        // 将拼接好的html字符串显示在页面中
        province.innerHTML = html
      }
    })

    // 为省份的下拉框添加值改变事件
    province.onchange = function(){
      // 获取省份id
      var pid = this.value

      // 清空县城下拉框中的数据
      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(){
        // 获取城市id
        var cid = this.value
        // 根据城市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>

formData实现二进制文件上传

客户端：

<!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" href="css/bootstrap.min.css">
  <style type="text/css">
    .container{
      padding-top: 60px;
    }
    .padding{
      padding: 5px 0 20px 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="form-group">
      <label>请选择文件</label>
      <input type="file" id="file">
      <div class="padding" id="box">
        <!-- <img src="" alt=""> -->
      </div>
      <div class="progress">
        <div class="progress-bar" style="width: 0%;" id="bar">0%</div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    // 获取文件选择控件
    var file = document.getElementById('file')
    // 获取进度条元素
    var bar = document.getElementById('bar')
    // 为文件选择控件添加onchange事件
    // 在用户选择文件时触发
    file.onchange = function(){
      // 创建空的FormData表单对象
      var formData = new FormData()
      // 将用户选择的文件追加到FormData表单对象中
      formData.append('attrName',this.files[0])
      // 创建ajax对象
      var xhr = new XMLHttpRequest()
      // 对ajax对象进行配置
      xhr.open('post','http://localhost:3000/upload')
      // 在文件上传的过程中持续触发
      xhr.upload.onprogress = function(ev){
        // console.log(ev);
        // ev.loaded 文件上传了多少
        // ev.total 上传文件的总大小
        var result = (ev.loaded / ev.total) * 100 + '%'
        // 设置进度条的宽度
        bar.style.width = result
        // 将百分比显示在进度条中
        bar.innerHTML = result
      }
      // 发送ajax请求
      xhr.send(formData)
      // 监听服务器端响应给客户端的数据
      xhr.onload = function(){
        if(xhr.status == 200){
          // 将服务器端返回的数据显示在控制台中
          console.log(xhr.responseText);
        }
      }
    }
  </script>
</body>
</html>