用jQuery封装ajax的笔记总结

最新推荐文章于 2024-04-02 13:55:25 发布

菜鸟小黄

最新推荐文章于 2024-04-02 13:55:25 发布

阅读量181

点赞数

分类专栏：前端文章标签： ajax js

本文链接：https://blog.csdn.net/weixin_43324141/article/details/105878777

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

$.ajax()

$.ajax()方法概述：

$.ajax({
     type: 'get',
     url: 'http://www.example.com',
     data: { name: 'zhangsan', age: '20' },
     contentType: 'application/x-www-form-urlencoded',
     //允许在请求发送之前 调用函数  可以验证参数格式等
     beforeSend: function () { 
         return false   //不通过的话取消发送
     },
     //请求车成功 服务器端返回数据后 就会调用
     success: function (response) {},
     error: function (xhr) {}
});

基础案例：

<body>
    <button id="btn">发送请求</button>
    <script src="js/jquery.min.js"></script>
    <script>
            $('#btn').on('click', function () {
			$.ajax({
				// 请求方式
				type: 'get',
				// 请求地址 也可以改成post
				url: '/base',
				// 请求成功以后函数被调用
				success: function (response) {
					// response为服务器端返回的数据
					// 方法内部会自动将json字符串转换为json对象
					console.log(response);
				},
				// 请求失败以后函数被调用
				error: function (xhr) {
					console.log(xhr)
				}
			})
		});
    </script>
</body>

node.js代码：

app.get('/base', (req, res) => {
	res.send({
		name: 'zhangsan',
		age: 30
	})
});

app.post('/base', (req, res) => {
	res.status(400).send({
		name: 'zhaoliu',
		age: 35
	})
});

注意：jquery文件目录要放在静态资源中不然可能会报错

$.ajax()方法传递参数：

代码：

<body>
	<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		$('#btn').on('click', function () {
			$.ajax({
				// 请求方式
				type: 'post',
				// 请求地址
				url: '/user',
				// 在请求发送之前调用
				beforeSend: function () {
					alert('请求不会被发送')
					// 请求不会被发送
					return false;
				},
				// 请求成功以后函数被调用
				success: function (response) {
					// response为服务器端返回的数据
					// 方法内部会自动将json字符串转换为json对象
					console.log(response);
				}
			})
		});
	</script>
</body>

data（表示向服务器端发送的请求参数）：
1.可以是对象类型：
```
data:{
	name: 'zhangsan',
	age: '100'
	 }
```
2.可以直接是属性=属性值：
```
data:{'name=zhangsan&age=100'}
```
contentType（指定参数格式类型）
1.‘application/x- www-form-urlencoded’——name=zhangsan&age=100类型
2. ‘application/json’—— {name: ‘wangwu’, age: 300}

beforeSend: function () {} // 在请求发送之前调用——可用来验证一些参数格式

	beforeSend: function () {
				alert('请求不会被发送')
				// 请求不会被发送
				return false;//阻止请求发送
			},

短信验证代码：
在这里插入图片描述

菜鸟小黄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jQuery封装ajax的笔记总结

$.ajax()$.ajax()方法概述：$.ajax({ type: 'get', url: 'http://www.example.com', data: { name: 'zhangsan', age: '20' }, contentType: 'application/x-www-form-urlencoded', //允许在请求...
复制链接

扫一扫