Ajax学习：jQuery发送ajax请求通用方法$.ajax

news2024/11/24 17:20:33

app.all('/jQuery',(requset,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    const data={name:'张三'};
	let str=JSON.stringify(data);//需要转换称为json 否则传递的任然是对象
    response.send(str);//3s之后返回给客户端
})

			$('button').eq(2).click(function() {
				//给谁发 发送的参数(类型 对象) 回调函数 设置响应体类型
				var a = {
					a: 33,
					b: 'post'
				}
				//参数是对象 属性设置请求参数
				$.ajax({
					url:'http://127.0.0.1:8000/jQuery',
					//参数
					data:a,
					//请求类型
					type:'GET',
					//成功的回调
					success:function(data){
						console.log(data)
					}
					
				})
			})

查看请求参数

查看响应体返回了字符串

设置响应体的数据：dataType:'json',

				//参数是对象 属性设置请求参数
				$.ajax({
					url:'http://127.0.0.1:8000/jQuery',
					//参数
					data:a,
					//请求类型
					type:'GET',
					//设置响应体结果
					dataType:'json',
					//成功的回调
					success:function(data){
						console.log(data)
					}
					
				})

返回对象

失败的回调；可以捕捉各种异常都可以网络超时等

			//参数是对象 属性设置请求参数
				$.ajax({
					url:'http://127.0.0.1:8000/jQuery',
					//参数
					data:a,
					//请求类型
					type:'GET',
					//设置响应体结果
					dataType:'json',
					//成功的回调
					success:function(data){
						console.log(data)
					},
			
					//失败的回调
					error:function(){
						alert('出错了')
					}
				})
			})

延时的回调：设置延时在服务器端设置延时函数

app.all('/jQuery',(requset,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    const data={name:'张三'};
	let str=JSON.stringify(data);//需要转换称为json 否则传递的任然是对象
	setTimeout(()=>{
		//设置响应体
		response.send(str);//3s之后返回给客户端
	},3000)
})

				//参数是对象 属性设置请求参数
				$.ajax({
					url:'http://127.0.0.1:8000/jQuery',
					//参数
					data:a,
					//请求类型
					type:'GET',
					//设置响应体结果
					dataType:'json',
					//成功的回调
					success:function(data){
						console.log(data)
					},
					//超时事件
					timeout:2000,
					
					//失败的回调
					error:function(){
						alert('出错了')
					}
				})
			})

$('button').eq(2).click(function() {
				//给谁发 发送的参数(类型 对象) 回调函数 设置响应体类型
				var a = {
					a: 33,
					b: 'post'
				}
				//参数是对象 属性设置请求参数
				$.ajax({
					url: 'http://127.0.0.1:8000/jQuery',
					//参数
					data: a,
					//请求类型
					type: 'GET',
					//设置响应体结果
					dataType: 'json',
					//成功的回调
					success: function(data) {
						console.log(data)
					},
					//超时事件
					timeout: 2000,

					//失败的回调
					error: function() {
						alert('出错了')
					},
					//头信息 自定义 预检请求校验 也就是发两次请求 需要设置all
					headers: {
						a: 230,
						d: 780
					}
				})
			})

设置请求头：自定义的是预检请求发两次需要设置all.和允许通过所有请求头

预定义请求头：

			$('button').eq(2).click(function() {
				//给谁发 发送的参数(类型 对象) 回调函数 设置响应体类型
				var a = {
					a: 33,
					b: 'post'
				}
				//参数是对象 属性设置请求参数
				$.ajax({
					url: 'http://127.0.0.1:8000/jQuery',
					//参数
					data: a,
					//请求类型
					type: 'GET',
					//设置响应体结果
					dataType: 'json',
					//成功的回调
					success: function(data) {
						console.log(data)
					},
					//超时事件
					timeout: 2000,

					//失败的回调
					error: function() {
						alert('出错了')
					},
					//头信息 自定义 预检请求校验 也就是发两次请求 需要设置all
					headers: {
						'Content-type':'application/x-www-form-urlencoded'
						
					}
				})
			})