菜单 搜索
首页 前端知识 NodeJs使用jQuery中$Ajax

NodeJs使用jQuery中$Ajax

2024-09-01 00:09:45 前端知识 前端哥 725 889 我要收藏

1. 说明

在这里插入图片描述


在这里插入图片描述

gitee地址：https://gitee.com/studyCodingEx/studys/

2. $.ajax方法的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$.ajax方法基本使用</title>
</head>
<body>
	<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		$('#btn').on('click', function () {
			$.ajax({
				type: 'get',
				url: 'http://localhost:3000/base',		// 可以直接写为/base
 
				// 请求成功以后函数被调用: response为服务器端返回的数据, 方法内部会自动将json字符串转换为json对象
				success: function (response) {
					console.log(response);
				},
 
				// 请求失败以后函数被调用
				error: function (xhr) {
					console.log(xhr)
				}
			})
		});
	</script>
</body>
</html>
复制

请添加图片描述

3. $.ajax方法传递请求参数

<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="UTF-8">
	<title>$.ajax方法基本使用</title>
	<!-- 
		application/x-www-form-urlencoded：  对应格式为 name=zhang&age=34
		application/json					 
	 -->
 
	<!-- 
		 data属性： 请求参数格式:
		 a. 可写为对象{...} => 内部将被转换为name=Zhang&age=34; 
		 	data: {
				 name: 'Zhang',
				 age: 23
			 }
 
		 b. 可直接写为name=Zhang&age=23该种类型格式; 
			 data: name=Zhang&age=23
			 
			 ```a, b情况下, contentType类型为: application/x-www-form-urlencoded, 这是默认类型;```
 
		 c. 可为json字符串, JSON.stringify(...); 
			 data: JSON.stringify({name: zhang, age: 23}); 
			 contentType: 'application/json'; 
	  -->
</head>
 
<body>
	<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		var obj = {
			name: 'wangwu',
			age: 300
		}
		$('#btn').on('click', function () {
			$.ajax({
				type: 'post',
				url: '/user',
 
				data: {
					name: 'zhangsan',
					age: 100
				},
 
				// data: 'name=Zhang&age=23',
 
				contentType: 'application/x-www-form-urlencoded', // 这是默认类型
				success: function (response) {
					console.log(response);
				}
			})
		});
	</script>
</body>
 
</html>
复制

请添加图片描述

4. beforeSend钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$.ajax方法基本使用</title>
</head>
<body>
	<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		$('#btn').on('click', function () {
			$.ajax({
				type: 'post',
				url: '/user',
				data: {
					name: 'zhangsan',
					age: 100
				},
 
				// 在请求发送之前调用
				// 该函数返回bool值, 如果内部返回false,那么Ajax请求将不会被发送; 
				beforeSend: function () {
					alert('请求不会被发送'); 
					return false;
 
					// return true; 
				},
 
				success: function (response) {
 
					console.log(response);
				}
			})
		});
	</script>
</body>
</html>
复制

请添加图片描述

5. serialize()方法使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>serialize方法说明</title>
	<!-- 
		jQuery:
			serialize(); 			// 将表单内容拼接成字符串类型的参数, 形如 name=zhang&age=24
			serializeArray(); 		// 将表单当中用户输入的内容转换为一个数组
			$.each(); 				// 循环遍历
	 -->
</head>
<body>
	<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="submit" value="提交">
	</form>
	<script src="/js/jquery.min.js"></script>
	<script type="text/javascript">
		$('#form').on('submit', function () {
 
			// 将表单内容拼接成字符串类型的参数
			var params = $('#form').serialize();		// => username=zhang&password=123456
			console.log("parmas is:> " + params);
 
			serializeObject($(this));					// => {username: "zhang", password: "123456"}
			return false;
		});
 
 
		// 将表单中用户输入的内容转换为对象类型 => {username: 'zhang', password: '123456'}
		function serializeObject (obj) {
			// 处理结果对象
			var result = {};
 
			// 本例中：[{name: 'username', value: 'zhang'}, {name: 'password', value: '123456'}]
			var array = obj.serializeArray();
			console.log(array);
 
			// 循环数组 将数组转换为对象类型
			$.each(array, function (index, value) {
				result[value.name] = value.value;
			})
 
			// 将处理的结果返回到函数外部
			return result;
		}
 
	</script>
</body>
</html>
复制

请添加图片描述

6. $.ajax方法发送jsonp请求

<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="UTF-8">
	<title>$.ajax方法基本使用</title>
	<!-- 
		dataType: 		值为jsonp时, 表示发送JSONP请求, 而不是Ajax请求; 
 
		jsonp: 			默认情况下是?callback=..., 
						通过jsonp我们可以手动更改callback参数名, ?cb=...; 
 
		jsonCallback: 	默认情况下, 当Ajax请求成功时, 将自动调用success()函数, 
						通过jsonCallback我们可以手动指定Ajax请求成功时调用的函数; 
 
	 -->
</head>
 
<body>
	<button id="btn">发送jsonp请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		function testFun(response) {
			console.log("@@@@@@@@@@@@@@@@@@@@@");
			console.log(response);
		}
 
		$('#btn').on('click', function () {
			$.ajax({
				url: 'http://localhost:3000/jsonp',
 
				dataType: 'jsonp', // 代表现在要发送的是jsonp请求
 
				jsonp: 'mycallback',
 
				jsonpCallback: 'testFun',
 
				// success: function (response) {
				// 	console.log("##################");
				// 	console.log(response);
				// }
			})
		});
	</script>
</body>
 
</html>
复制

请添加图片描述

7. $.get、$.post方法的使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$.ajax方法基本使用</title>
	<!-- 
		$.get();
		$.post(); 
	 -->
</head>
 
<body>
	<button id="btn1">发送get请求</button>
	<button id="btn2">发送post请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		$('#btn1').on('click', function () {
			$.get('/base', 'name=zhangsan&age=30', function (response) {
				console.log("response is:> ");
				console.log(response); 
			}); 
		});
 
		$('#btn2').on('click', function() {
			$.post('/base', function (response) {
				console.log(response)
			}); 
		}); 
	</script>
</body>
</html>
复制

请添加图片描述

8. restful风格的api

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 
		restful API的实现：
			GET: 		http://www.example.com/users		// 获取用户列表数据
			POST:		http://www.example.com/users		// 创建(添加)用户数据
			GET: 		http://www.example.com/users/1		// 获取id为1的用户信息
			PUT: 		http://www.example.com/users/1		// 修改id为1的用户信息
			DELETE:	 	http://www.example.com/users/1		// 删除id为1的用户信息
		特点：请求地址相同, 请求方式不同, 所做的事情自然也就不同了; 
	 -->
</head>
 
<body>
	<script src="/js/jquery.min.js"></script>
	<script type="text/javascript">
		// 获取用户列表信息
		$.ajax({
			type: 'get',
			url: '/users',
			success: function (response) {
				console.log(response)
			}
		}); 
 
		// 获取id为1的用户信息
		$.ajax({
			type: 'get',
			url: '/users/1',
			success: function (response) {
				console.log(response)
			}
		}); 
 
		// 获取id为1的用户信息
		$.ajax({
			type: 'delete',
			url: '/users/10',
			success: function (response) {
				console.log(response)
			}
		}); 
 
		// 获取id为1的用户信息
		$.ajax({
			type: 'put',
			url: '/users/10',
			success: function (response) {
				console.log(response)
			}
		}); 
	</script>
</body>
</html>
复制

在这里插入图片描述

9. xml介绍

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
 
<body>
	<button id="btn">发送请求</button>
	<div id="container" style="background-color: red;"></div>
	<script type="text/javascript">
		var btn = document.getElementById('btn');
		var container = document.getElementById('container');
 
		btn.onclick = function () {
			var xhr = new XMLHttpRequest();
			xhr.open('get', '/xmlTest');
			xhr.send();
			xhr.onload = function () {
				// xhr.responseXML 获取服务器端返回的xml数据
				var xmlDocument = xhr.responseXML;
				// console.log(xmlDocument);
				var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
				container.innerHTML = title;
			}
		}
	</script>
</body>
</html>
 
复制

请添加图片描述

10. todo案例

请添加图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/17401.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！