Ajax案例

于 2020-08-04 10:43:52 发布
阅读量227 收藏 1
点赞数 2
分类专栏： Ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_47085255/article/details/107775724
版权

1. 验证邮箱地址唯一性

  • 实现步骤:
    1. 获取文本框并为其添加离开焦点事件
    2. 离开焦点时, 检测用户输入的邮箱地址是否符合规则
    3. 如果不符合规则, 阻止程序向下执行并给出提示信息
    4. 向服务器发送请求, 检测邮箱地址是否被别人注册
    5. 根据服务器端返回值决定客户端显示何种提示信息
  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>验证邮箱地址是否已经注册</title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/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-group">
			<label>邮箱地址</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/verifyEmailAdress',
				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>
  • 服务器端代码(三个案例的服务端代码都在里面)
const express = require('express')
const path = require('path')

const app = express()

app.use(express.static(path.join(__dirname, 'public')))

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

// 输入框文字提示
app.get('/searchAutoPrompt', (req, res) => {
	// 搜索关键字 
	const key = req.query.key
	// 提示文字列表
	const list = [
		'半身裙 女 中长',
		'半身裙2020年新款直筒',
		'半身裙中长款加厚',
		'半身裙白色 中长款',
		'半身裙a字裙 时尚',
		'半身裙女中长款雪纺',
		'半身裙套装女',
		'上衣女2020小香风',
		'上衣小众设计夏',
		'上衣ins女潮',
		'上衣方领翠花',
		'上衣女性感夏',
		'上衣女圆领',
		'上衣女ol夏'
	]	
	// 搜索结果
	let result = list.filter(item => item.includes(key))
	// 将查询结果返回给客户端
	res.send(result)
})

// 获取省份
app.get('/province', (req, res) => {
	res.json([{
		id: '001',
		name: '黑龙江省'
	},{
		id: '002',
		name: '四川省'
	},{
		id: '003',
		name: '河北省'
	},{
		id: '004',
		name: '江苏省'
	}])
})

// 根据省份id获取城市
app.get('/cities', (req, res) => {
	// 获取省份id
	const id = req.query.id
	// 城市信息
	const cities = {
		'001': [{
			id: '300',
			name: '哈尔滨市'
		}, {
			id: '301',
			name: '齐齐哈尔市'
		}, {
			id: '302',
			name: '牡丹江市'
		}, {
			id: '303',
			name: '佳木斯市'
		}],
		'002': [{
			id: '400',
			name: '成都市'
		}, {
			id: '401',
			name: '绵阳市'
		}, {
			id: '402',
			name: '德阳市'
		}, {
			id: '403',
			name: '攀枝花市'
		}],
		'003': [{
			id: '500',
			name: '石家庄市'
		}, {
			id: '501',
			name: '唐山市'
		}, {
			id: '502',
			name: '秦皇岛市'
		}, {
			id: '503',
			name: '邯郸市'
		}],
		'004': [{
			id: '600',
			name: '常州市'
		}, {
			id: '601',
			name: '徐州市'
		}, {
			id: '602',
			name: '南京市'
		}, {
			id: '603',
			name: '淮安市'
		}]
	}
	// 响应
	res.send(cities[id])
})

// 根据城市id获取县城
app.get('/areas', (req, res) => {
	// 获取城市id
	const id = req.query.id
	// 县城信息
	const areas = {
		'300': [{
			id: '20',
			name: '道里区',
		}, {
			id: '21',
			name: '南岗区'
		}, {
			id: '22',
			name: '平房区',
		}, {
			id: '23',
			name: '松北区'
		}],
		'301': [{
			id: '30',
			name: '龙沙区'
		}, {
			id: '31',
			name: '铁锋区'
		}, {
			id: '32',
			name: '富拉尔基区'
		}]
	}
	// 响应
	res.send(areas[id] || [])
})

app.listen(3000, () => console.log('Server is running...'))
  • 封装的ajax
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);
		} else {
			// 调用失败回调函数并且将xhr对象传递给回调函数
			defaults.error(responseText);
		} 
	}
	// 当网络中断时
	xhr.onerror = function () {
		// 调用失败回调函数并且将xhr对象传递给回调函数
		defaults.error(xhr);
	}
}

template-web.js可自行去官网下载：https://aui.github.io/art-template/zh-cn/index.html

2. 搜索框内容自动提示

  • 实现步骤:
    1. 获取搜索框并为其添加用户输入事件
    2. 获取用户输入的关键字
    3. 向服务器端发送请求并携带关键字作为参数
    4. 将相应数据显示在搜索框底部
  • 代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>搜索框输入文字自动提示</title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/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')
    // 当用户在文本框输入的时候触发
    searchInp.oninput = function () {
      // 清除上一次开启的定时器
      clearTimeout(timer)
      // 获取用户输入的内容
      var key = this.value

      // 如果用户没有在搜索框中输入内容 
      if (key.trim().length === 0) {
        // 将提示下拉框隐藏掉
        listBox.style.display = 'none'
        // 阻止程序向下执行
        return
      }

      // 存储定时器的变量
      var timer = null
      // 开启定时器, 让请求延迟发送
      timer = setTimeout(function () {
        // 向服务器端发送请求
        // 向服务器端索取和用户输入关键字相关的内容
        ajax({
          type: 'get',
          url: 'http://localhost:3000/searchAutoPrompt',
          data: {
            key: key
          },
          success: function (result) {
            let html = template('tpl', {result: result})
            listBox.innerHTML = html
            // 显示ul容器
            listBox.style.display = 'block'
          }
        })
    
      }, 800)
  }
  </script>
</body>
</html>

省市区三级联动

  • 实现步骤:
    1. 通过接口获取省份信息
    2. 使用JavaScript获取到省市区下拉框元素
    3. 将服务端返回的省份信息显示在下拉框中
    4. 为下拉框元素添加表单值改变事件(onchange)
    5. 当用户选择省份时, 根据省份id获取城市信息
    6. 当用户选择城市是, 根据城市id获取县城信息
  • 代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>省市区三级联动</title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/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">
          
        </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 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
      }
    })

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

      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: '/areas',
        data: {
          id: cid
        },
        success: function (data) {
          var html = template('areaTpl', { area: data })
          area.innerHTML = html
        }
      })
    }
  </script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值