$.ajax()

最新推荐文章于 2024-03-02 11:28:57 发布

一麻袋小猫

最新推荐文章于 2024-03-02 11:28:57 发布

阅读量310

点赞数

分类专栏： Ajax 工具文章标签： ajax

本文链接：https://blog.csdn.net/Zmongo/article/details/105411050

版权

工具同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

Ajax

17 篇文章 0 订阅

订阅专栏

$.ajax()方法概述

作用：发送Ajax请求
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		var params = {name: 'wagnwu', age: 300}
		$('#btn').on('click', function () {
			$.ajax({
				//请求方式
				type: 'get',
				//请求地址
				url: 'http://localhost:3000/base',
				//向服务器端发送的请求参数
				//内部会把对象转换成name=zhangsan&age=100
				// data: {
				// 	name: 'zhangsan',
				// 	age: 100
				// },
				data: JSON.stringify(params),
				// 指定参数的格式类型
				contentType: 'application/json',
				//在请求发送之前调用
				beforeSend: function () {
					alert('请求即将发送');
					//请求不会被发送
					return false;
				},
				success: function (response) {
					//response为服务器端返回的数据
					//方法内部会自动将json字符串转换为json对象
					console.log(response);
				},
				//请求失败后函数被调用
				error: function (xhr) {
					console.log(xhr)
				}
			})
		});
	</script>
</body>
</html>

app.get('/base', (req, res) => {
	//外面是单引号，里面是双引号
	//在服务器端调用函数
	res.send({
		name: 'zhaoli',
		age: 20
	});
});

serialize方法

作用：将表单中的数据自动拼接成字符串类型的参数。
在这里插入图片描述

输出内容： username=zhangsan&password=123 => 请求参数的格式

在这里插入图片描述
这个方法用于将表单中用户输入的内容转换为对象类型。便于对用户输入的内容进行判断，验证等操作。

作用：发送jsonp请求
在这里插入图片描述
Ajax对象是通过Ajax对象发送请求的，jsonp是通过创建script标签发送请求的。


		function fn (response) {
			console.log(response); 
		}
		$('#btn').on('click', function () {
			$.ajax({
				url: '/jsonp',
				//代表现在要发送的是jsonp请求
				//向服务器端传递函数名字的参数名称
				jsonp: 'cb',
				jsonpCallback: 'fn',
				dataType: 'jsonp',
				// success: function (response) {
				// 	console.log(response);
				// }
			})
		});

app.get('/jsonp', (req, res) => {
	const cb = req.query.cb;
	const data = cb + "({name: 'zhaoliu'})"
	res.send(data);
	// res.jsonp({
	// 	name: 'lisi',
	// 	age: 50
	// })
})

一麻袋小猫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
$.ajax()

$.ajax()方法概述作用：发送Ajax请求<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <button id="btn"&g...
复制链接

扫一扫