jQuery异步请求错误信息处理_jq异步提示-优快云博客

本文介绍如何在前端使用jQuery处理Ajax请求的错误，包括权限不足、会话过期、连接超时等场景，并展示如何在后端Java环境中响应这些错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里只讨论页面中使用jQuery异步操作发生时错误进行处理，使用 layer.js 作为弹出层插件（简单方便，当然也可以使用其他弹出层插件）显示相关的信息给客户端。

在Java环境中，判断异步请求的代码如下：（非异步请求，这里不做说明，一般是跳转到错误页面等操作）

//判断当前请求是否是异步请求
protected boolean isAjaxHttpRequest(ServletRequest request){
		
	HttpServletRequest servletRequest = (HttpServletRequest) request;
	if (servletRequest.getHeader("x-requested-with") != null && 
				servletRequest.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")) {
	    return true;
	} 
	return false;
}

然而发生Ajax请求时，可能发生以下错误信息：

用户未登录或会话过期（或者用户在别处登录了，导致当前用户会话过期）
用户没有权限访问系统资源
用户操作时连接服务器超时
用户操作发生系统错误

注意：由于客户端发送可能会向服务器端发送多个不同的异步请求，所以这里对jQuery异步请求封装成一个统一的处理函数，然而每次请求都有可能发送以上几种错误中的一种，所以将请求完成及错误信息加入到 jQuery全局异步请求设置中（$.ajaxSetup()）,下面看一下封装的js文件代码：

/** 全局异步请求设置 */
$.ajaxSetup({
    global: false,
    type: "POST",
    error : function(XMLHttpRequest, status, e) { 
    　　　　var data = XMLHttpRequest.responseText;
	  	if (data && data == 'noauth') 
	  	{
	    　　　　layer.alert('您无此访问权限，请与管理员联系！', {icon : 2}); 
	    }
	  	else if (status == "timeout" || data == "timeout") 
	  	{
	  		layer.alert('连接服务器超时！请重试', {icon : 2});		
	    }
	    else
	    {
	    　　　　layer.alert('系统出现错误！请重试', {icon : 2});
	    }
	    return false;
    　 },
    complete: function (XMLHttpRequest, textStatus) {
        var data = XMLHttpRequest.responseText;
		if (data == "timeout") {
        	layer.alert('您的会话已过期，需重新登录系统！',function(){
   				if( window.top != window.self ){
	                window.top.location = rootPath;
	            }else{
					window.location = rootPath;
				}
			});
        }else if(data == "loginout"){
        	layer.alert('您的帐号已在另一处登录，您被迫下线！',function(){
   				if( window.top != window.self ){
	                window.top.location = rootPath;
	            }else{
					window.location = rootPath;
				}
			});
		}
    }
});

//通用ajax方法 post 请求json数据
function ajaxJson(url, postData, callBack,isAsync,loadtxt) {
    try {
        if (isAsync == undefined)
            isAsync = false;
        var lid = 0;
        if (isAsync) {
            if (loadtxt == undefined)
                loadtxt = "正在加载...";
            lid = layer.msg(loadtxt, { icon: 16, shade: [0.1, '#fff'] ,time:90000});
        }
        $.ajax({
            url: url,
            type: "POST",
            data: postData,
            dataType: "json",
            async: isAsync,
            timeout: 10000,
            success: function (data) {
                callBack(data);
            },
            complete: function () {
                if (isAsync) {
                    layer.close(lid);
                }
            }
        });
    } catch (e) {
        layer.alert("系统异常，请联系管理员！");
    }
}
//通用ajax方法 post 请求get数据
function ajaxJsonByGet(url, userData, callBack) {
    try {
    	var loadtxt = "正在加载数据...";
        var lid = layer.msg(loadtxt, { icon: 16, shade: [0.1, '#fff'] ,time:90000});
        $.ajax({
            url: url,
            type: "GET",
            data: userData,
            dataType: "json",
            async: true,
            cache: false,
            timeout: 7000,
            success: function (data) {
                callBack(data);
            },
            complete: function () {
                 layer.close(lid)
            }
        });
    } catch (e) {
        layer.alert("系统异常，请联系管理员！");
    }
}
//通用ajax方法 get、post请求xml数据
function ajaxXmlByGet( url , userData , callBack ) {
    try {
        $.ajax({
            url: url,
            type: "GET",
            data: userData,
            dataType: "xml",
            async: true,
            cache: false,
            timeout: 7000,
            success: function (data) {
                callBack(data);
            }
        });
    } catch (e) {
        layer.alert("系统异常，请联系管理员！");
    }
}
function ajaxXmlByPost( url , userData , callBack ) {
    try {
        $.ajax({
            url: url,
            type: "POST",
            data: userData,
            dataType: "xml",
            async: true,
            cache: false,
            timeout: 7000,
            success: function (data) {
                callBack(data);
            }
        });
    } catch (e) {
        layer.alert("系统异常，请联系管理员！");
    }
}

前端调用操作：

比如这里保存用户操作，只需要传递url、参数，然后再回调函数中处理服务器端返回的数据即可（如果请求正常的话，没有错误信息）

$(function(){
    $("#submit").click(function(){
        //使用 post 方式提交表单    
        ajaxJson("saveUser.do", {username: 'aaa', age: 30}, function(data){
            //在回调函数中，处理服务器端返回的数据（返回json格式数据）
            if (data.status == "success"){
                layer.alert("操作成功！");
            }else{
                layer.alert("操作失败！");
            }
        }
        ,true   // true 表示异步请求，jQuery异步请求中的参数
        )
    });
})

注意：如果请求成功了（后台返回数据），则会进入到请求方法ajaxJson中的回调函数中，最终会弹出操作成功或操作失败提示。若请求时发送错误了，则会进入到$.ajaxSetup(）中的相关的方法中并弹出相应的错误信息。

以上是前端js相关的内容，下面看一下后端错误信息处理程序怎么写：

1、登录拦截器类中（LoginInterceptor.java）
//未登录，跳转url 或 异步发送登录超时代码
if (isAjaxHttpRequest(request)){
		PrintWriter writer =  response.getWriter();
		writer.write("timeout");
		writer.flush();
		writer.close();
}else{ 
    return "login.jsp"; //非异步请求，跳转到登录页面
}

2、权限拦截器类中（AuthorityInterceptor）

//先判断用户是否有权限，若无权则进入以下判断：
if (isAjaxHttpRequest(request)){
		PrintWriter writer =  response.getWriter();
		writer.write("noauth");
		writer.flush();
		writer.close();
}else{

   return "noauth.jsp"; //跳转到没有权限提示页面
}


3、控制器类方法（UserController.java）

//处理完相应的逻辑后，返回json格式即可，前端接收并提示。