当前位置: 首页>前端>正文

vite jquery 全局挂载 jquery全局事件

1、加载请求

jQuery提供了两种全局事件:ajaxStart()、ajaxStop()。

只要用户触发了Ajax,请求开始时(未完成其他请求)激活ajaxStart(),请求结束时激活ajaxStop()

$('.loading').ajaxStart(function(){
	$(this).show();
}).ajaxStop(function(){
	$(this).hide();
});

若要请求时间太长。可以设置超时timeout;

若不想触发全局事件,可以设置“global”为false。

$.ajax({
	timeout:500
});

$.ajax({
	global:false
});

2、错误请求

(1)使用ajax,可以使用error()方法

$.ajax(function(){
	error:function(xhr,errorText,errorStatus){
		alert(xhr.status+':'+xhr.statusText);
	}
});

(2)$.post()使用连缀的error()方法提示错误,连缀方法被fail()取代。

$.post('user.php').error(function(xhr,errorText,errorType){
	alert(errorText+':'+errorType);
	alert(xhr.status+':'+xhr.statusText);
});

(3)$.post()使用全局ajaxError()提示错误

$(document).ajaxError(function(event,xhr,settings,info){
	for(var i in event){
		document.write(i+"<br/>");
	}
});

3、请求全局事件

(1)ajaxSuccess(),对应局部方法success(),请求成功完成时执行

(2)ajaxComplete(),对应complete(),请求完成后注册一个回调函数

(3)ajaxSend(),没有对应的局部方法,请求之前要绑定的函数。(只有属性beforeSend)

$(function(){
	$('form input[type=button]').click(function(){
		$.post('user.php',$('form').serialize());
	});

	$(document).ajaxSend(function(){
		alert("发送请求之前!");
	}).ajaxComplete(function(){
		alert("请求完成后!");
	}).ajaxSuccess(function(){
		alert("请求成功后!");
	}).ajaxError(funcion(){
		alert("请求失败后!");
	});
});

此外,若要在ajax()方法下执行上述这些函数,如下所示:

$.ajax({
	type:'POST',
	url:'user.php',
	data:$('form').serialize(),
	success:function(response,status,xhr){
		$('#box').html(response);
	},
	complete:function(){
		alert('请求完成后,不管成功与失败!');
	},
	beforeSend:function(){
		alert('请求发送之前!');
	},
	error:function(){
		alert('请求失败后!');
	}
});

4、JSON和JSONP

(1)JSON

首先,以一个json文件为例,text.json

[
	{
		"url":"baidu.com"
	}
]

若要在ajax中加载该json文件,即

$.ajax({
	type:'POST',
	url:'text.json',
	//dataType:'html',
	success:function(response,status,xhr){
		//alert(response);
	}

});

由于json文件默认的dataType为“json”;

若强制将其改为“html”,则在alert弹出对话框时,需要借助“response”

(2)JSONP

若想跨域进行操作文件时,就必须使用JSONP。

JSONP(JSON with Padding),它是一个非官方的协议,它允许在服务器集成Script tags返回至客户端,同时通过JavaScript callback回调函数的形式实现跨域访问。

//跨域的php端文件,即远程端的文件jsonp.php
<?php
	$arr=array('a'=>1,'b'=>2,'c'=>3);
	$result=json_encode($arr);
	$callback=$_GET['callback'];
	echo $callback"($result)";
?>

类似于上述的远程端php,需要使用jsonp文件,如下所示:

a、本地访问——“jsonp.php”

$.ajax({
	type:'POST',
	url:'jsonp.php',    //php文件默认是html文件,得到的是json文件;
	dataType:'json',
	success:function(response,status,xhr){
		alert(response.a);
	}

});

b、远程端访问

若url对应的不是“jsonp.php”,而是“http://www.li/jsonp.php?callback=?”

若远程访问json2.php,此时不用ajax()方法,用getJSON()方法

//跨域,远程
$.getJSON("http://www.li/json.php?callback=?",function(){
	alert(response.a);
	console.log(response);
});

远程访问json,采用jsonp进行

(1)若dataType:'json'时,所对应的url文件必须是含有“?callback=?”的情况;

(2)若不使用“callback”回调函数时,还可以使用第二种方法,在ajax()方法中,将“dataType”设置为“jsonp”。

5、jqXHR对象

该对象是原生XMLHttpRequest的超级,包括“success()、complete()、error()”

而对于jqXHR是$.ajax()返回的对象。

//获取jqXHR对象
var jqXHR=$.ajax({
	type:'POST',
	url:'test.php',
	data:$('form').serialize();
});
jqXHR.succss(function(){
	alert(response);
});

由于success()、complete()、error()方法可能取消,同时用done()、always()、fail()三种代替。

done()表示成功后的回调函数。

jqXHR.done(function(response){
	alert(response+'1');
}).done(function(response){
	alert(response+'2');
});

使用jqXHR的连缀方式比$.ajax()属性方式3大好处:

(1)可连缀操作,可读性大大提高;

(2)可以多次执行同一个回调函数;

(3)为多个操作指定回调函数。

(注意:在上述案例中类似于jqXHR.done().done())


https://www.xamrdz.com/web/2ta1931367.html

相关文章: