AJAX学习案例（附完整代码）

最新推荐文章于 2022-09-23 13:02:43 发布
最新推荐文章于 2022-09-23 13:02:43 发布
阅读量499 收藏 6
点赞数
分类专栏： ajax nodejs 前端 文章标签： ajax node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xyouzi/article/details/104081559
版权
前端 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
ajax
4 篇文章 0 订阅
订阅专栏
nodejs
4 篇文章 0 订阅
订阅专栏

以下实例均调用的封装好的AJAX

function AJAX(options){

	// 存储的是默认值
	var defaults = {
		type: 'get',
		url: '',
		data: {},
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		success: function () {},
		error: function () {}
	};

	// 将options对象中的属性覆盖defaults
	Object.assign(defaults,options);

	let xhr = new XMLHttpRequest();

	// 拼接请求参数的变量
	let params = '';

	// 遍历用户传递的对象格式数据
	for(let attr in defaults.data){
		// 将参数转为字符串格式
		params += attr + '=' + defaults.data[attr] + '&';
	}

	// 将参数最后的&截取掉
	params = params.substr(0,params.length-1);

	// 判断请求方式 将参数拼接进url
	if(defaults.type == 'get'){
		defaults.url = defaults.url + '?' +params;
	}

	xhr.open(defaults.type,defaults.url);

	// 如果请求方式为post 设置请求参数格式的类型
	if(defaults.type == 'post')
	{
		// 用户向服务器端传递的请求参数的类型
		let 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);
		}
	}
	// 若为get 则不需带参数 直接发送请求
	else{
		xhr.send()
	}

	xhr.onload = function(){
		// 获取响应头中的数据
		let contentType = xhr.getResponseHeader('Content-Type');
		// 服务器端返回的数据
		let responseText = xhr.responseText;
		// 如果响应类型中包含application/json
		if(contentType.includes('application/json')){
			// 将json字符串转为json对象
			responseText = JSON.parse(responseText)
		}
		if(xhr.status == 200){
			defaults.success(responseText,xhr)
		}else{
			defaults.error(responseText,xhr)
		}
	}
}

01.验证邮箱地址唯一性

在这里插入图片描述
前端代码

<!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 type="text/javascript">
        let email = document.getElementById('email');
        let info = document.getElementById('info');
        // 表单失去焦点
        email.onblur = emailValid;
        function emailValid(){
            let email = this.value;
            let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(!reg.test(email)){   // 如果不符合邮箱格式
                info.innerHTML = '邮箱格式错误'
                info.className = 'bg-danger';
                return;
            }
            else{
                AJAX({
                    type:'get',
                    url:'http:/verifyEmailAdress',
                    data:{
                        email
                    },
                    success(result){
                        // console.log(result)
                        info.innerHTML = result.message;
                        info.className = 'bg-success';
                    },
                    error(err){
                        // console.log(err)
                        info.innerHTML = err.message;
                        info.className = 'bg-danger';
                    }
                })
            }
            
        }
    </script>
</body>
</html>

后端代码

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

02.搜索框内容自动提示

在这里插入图片描述
用了art-template模板引擎，需下载并引入，如不使用模板引擎可用字符串拼接
art-template模板引擎的使用方法在最下面

前端

<!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 res}}
		<li class="list-group-item">{{$value}}</li>
		{{/each}}
	</script>

	<script type="text/javascript">
		let listBox = document.getElementById('list-box');
		let search = document.getElementById('search');
		let timer = null;
		search.oninput = searchInput;
		function searchInput(){
			clearTimeout(timer);
			let key = this.value;
			// 判断输入的值为空时
			if(key.trim().length == 0){
				listBox.style.display = 'none';
				return;
			}
			setTimeout(() => {
				AJAX({
					type:'get',
					url:'http://localhost:3000/searchAutoPrompt',
					data:{
						key
					},
					success(res){
						let html = template('tpl',{res});
						listBox.style.display = 'block';
						listBox.innerHTML = html;
					}
				})
			}, 300);
		}
	</script>	
	
</body>
</html>

后端

// 输入框文字提示
app.get('/searchAutoPrompt', (req, res) => {
	// 搜索关键字
	const key = req.query.key;
	// 提示文字列表
	const list = [
		'红米手机',
		'红豆',
		'黑面膜',
		'吐鲁番',
		'黑天鹅',
		'圆木凳'
	];
	// 搜索结果
	let result = list.filter(item => item.includes(key));
	// 将查询结果返回给客户端
	res.send(result);
});

省市区联动

在这里插入图片描述
前端

<!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="provinceT">
		<option>请选择城市</option>
		{{each province}}
		<option value="{{$value.id}}">{{$value.name}}</option>
		{{/each}}
	</script>

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

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

	<script type="text/javascript">
		let provinceId = document.getElementById('province');
		let cityId = document.getElementById('city');
		let areaId = document.getElementById('area');
		AJAX({
			type:'get',
			url:'http://localhost:3000/province',
			success(res){
				let html = template('provinceT',{province:res});
				provinceId.innerHTML = html;
			}
		});
		provinceId.onchange = function(){
			let html = template('areaT',[]);
			areaId.innerHTML = html;
			AJAX({
				type:'get',
				url:'http://localhost:3000/cities',
				data:{
					id:this.value
				},
				success(res){
					let html = template('cityT',{city:res});
					cityId.innerHTML = html
				}
			})
		};
		cityId.onchange = function(){
			AJAX({
				type:'get',
				url:'http://localhost:3000/areas',
				data:{
					id:this.value
				},
				success(res){
					let html = template('areaT',{area:res});
					areaId.innerHTML = html
				}
			})
		}
	</script>
</body>
</html>

后端

// 获取省份
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] || []);
});

art-template模板引擎使用方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 1. 将模板引擎的库文件引入到当前页面 -->
	<script src="/js/template-web.js"></script>
</head>
<body>
	<div id="container"></div>
	
	<!-- 2.准备art-template模板 -->
	<script type="text/html" id="tpl">
		<h1>{{username}} {{age}}</h1>
	</script>

	<script type="text/javascript">
		// 3.告诉模板引擎将那个数据和哪个模板进行拼接
		// template()内的两个参数分别是 对应的模板id值和数据
		var html = template('tpl', {username: 'zhangsan', age: 30});
		document.getElementById('container').innerHTML = html;
	</script>
</body>
</html>

希望能与大家共同进步

ray_zzzzz
关注
专栏目录
Ajax应用简单实例
oscar999的专栏
08-16 1852
当用户登录时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。 　　如果我们用AJAX技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向 服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进
Ajax 简单的实例代码
礼貌先生的博客
03-02 1万+
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。  HTML Code  1 2 3 4 5 6 7 8 9
一个完整的ajax应用例子
09-25
一个完整的用js写的ajax例子，模仿注册页面输入用户名，输入框失去焦点后，后台异步判断该用户名是否可用，并在页面显示判断结果
ajax使用案例
weixin_34361881的博客
06-08 126
1、初步了解 这里可以修改网络快和慢。限网，流量式的，做模拟的。 network->all代表加载的所有事件 后面的那个显示有/，这个是首路由。后面有很多svg和js等文件 想要这个服务器的地址，使用network->XHR 它是XMLHttpRequest 。 ajax封装的就是这个XHR对象。这里就能看到这个对象 对象里有很多数据，没必要去看...
ajax 示例代码,AJAX 实例
weixin_42303568的博客
08-05 125
点击运行function loadXMLDoc(url){var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Mi...
JQuery 入门 - 附案例代码
wuyxinu的博客
12-23 6万+
为什么要学jquery 使用javascript开发过程中，有许多的缺点： 查找元素的方法单一，麻烦。 遍历数组很麻烦，通常要嵌套一大堆的for循环。 有兼容性问题。 想要实现简单的动画效果，也很麻烦 代码冗余。 体验jquery的使用 /* * 1. 查找元素的方法多种多样，非常灵活 * 2. 拥有隐式迭代特性，因此不再需要手写for循环了。 * 3. 完全没有兼容性问题。 * 4. 实现动...
【Java毕设合集】各种毕业设计实战案例（附源码课件+完整资料）
最新发布
07-07
本资源名为“【Java毕设合集】”，它是一份包含多种Java毕业设计实战案例的综合资料包，专为即将毕业的学生提供丰富的项目参考和学习材料。这份合集旨在帮助学生提升Java编程技能，理解软件开发流程，并为他们的简历...
在线商城之购物车实现——（附完整代码）
在有我的世界
06-29 1万+
1、首页 1.1实现效果 1.2代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在线商城</title> <script src="jquery.min.js"></script> <style> ul { list-style: none; } a { text
Ajax基础教程中文版(附代码)
01-12
在"Ajax基础教程中文版(附代码)"中，你将学习到如何创建基本的Ajax请求，以及如何在实际项目中应用Ajax，包括错误处理、数据验证、状态管理等方面。 ### 9. 结论 Ajax技术极大地提升了Web应用的用户体验，通过学习...
jQuery+Ajax+PHP实现“喜欢”评级功能附源码下载
12-11
前端JavaScript代码会监听Ajax请求的响应，根据返回结果更新页面显示。如果请求成功且服务器反馈“喜欢”次数已更新，前端会更新对应的按钮显示的“喜欢”次数。同时，为了提供良好的用户体验，可能还会添加一些视觉...
ajax示例代码
09-04
ajax基础示例，后台是Java ,前面是最基础的AJAX示例。
ajax的使用及案例
06-05
该项目集合了ajax的项目实例，以及各种用法，包括jQuery，Html，XML，json等方法的具体实例
Ajax完整项目实例
10-29
这是应用Ajax技术开发的一个web项目，图书管理系统，里面有详细的注解！
简单Ajax功能实现全代码
08-19
ajax区下拉框变化时 查询街道信息 给街道下拉框赋值！
Ajax的一个实例及代码
飞越蓝天的专栏
06-09 1230
这是用ajax做的一个小小的应用！当选择menu1的时候，会出来menu里面所有的内容。同理对于menu2.多的不说，代码如下： 首先是inner.html文件 Using mutliple XMLHttpRequest objects var menu; function getmenu(menuNumber) { var XMLHttpRequestObject
jQuery 完整 ajax示例
热门推荐
：）
06-17 21万+
$(function(){ //请求参数 var list = {}; // $.ajax({ //请求方式 type : "POST", //请求的媒体类型 contentType: "application/json;chars...
Ajax学习案例一
落雨心星
08-05 182
前端html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // 创建 XML...
AJAX代码
colin的专栏
10-30 449
 var http_request = false; function send_request(url) {//初始化、指定处理函数、发送请求的函数  http_request = false;  //开始初始化XMLHttpRequest对象  if(window.XMLHttpRequest) { //Mozilla 浏览器   http_request = new XMLHttpReque
AJax入门案例（代码实现）
m0_58969296的博客
09-23 1776
Ajax入门案例代码实现
20个数据可视化大屏设计案例及代码解析
资源摘要信息:"网页大屏设计案例附代码"涵盖了网页设计领域中一个非常具体且高度专业化的细分市场——数据可视化大屏的设计和实现。数据可视化大屏，又常称为数据看板或仪表板，是一种广泛应用于商业智能(Business ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值