仅适用于现在项目的请求异常判断和处理

最新推荐文章于 2024-12-10 09:04:30 发布

王大强~

最新推荐文章于 2024-12-10 09:04:30 发布

阅读量400

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript-篇

本文链接：https://blog.youkuaiyun.com/angularWQ/article/details/97804989

JavaScript-篇专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种基于jQuery的AJAX操作封装方法，包括GET和POST请求的异步和同步实现，以及异常处理机制。该封装适用于后台管理系统，通过判断响应状态来处理异常，并使用layer.js进行错误提示。

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

/*
 * 描 述：ajax操作方法
 * jq扩展类  精简版
 * 根据现有接口判断方法判断异常-后台管理系统的弹窗
 * ss-ajax
 * 依赖公共js layer弹窗 和 公共css
 */
;(function ($) {
    "use strict";
    var httpCode = {
        success: 200,
        fail: 400,
        exception: 500
    };
    var exres = { code: httpCode.exception, info: '通信异常，请联系管理员！' }
     $.extend({
         // get请求方法（异步）:url地址,callback回调函数
         httpAsyncGet: function (url, callback) {
             $.ajax({
                 url: url,
                 type: "GET",
                 dataType: "json",
                 async: true,
                 cache: false,
                 success: function (data) {
                     if (data.state == "success") {//判断返回异常 ps(目前判断方法(data.state == "success")根据目前后台判断标准 )
                         callback(data);
                     }else {
                         layer.msg(data.message, { icon: 5 });//后台管理的异常弹窗
                        // $.modalAlert({content:data.message});
                        // $.modalAlert({ content: data.message, type: data.state }); 在学习系统上还要加语音
                     }
                 },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                     callback(exres);
                     layer.msg(exres.info, { icon: 5 });
                     //有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
                 },
                 beforeSend: function () {
                     //发送请求前
                 },
                 complete: function () {
                     //请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
                 }
             });
         },
         // get请求方法（同步）:url地址,param参数
         httpGet: function (url, param) {
             var res = {};
             $.ajax({
                 url: url,
                 data: param,
                 type: "GET",
                 dataType: "json",
                 async: false,
                 cache: false,
                 success: function (data) {
                     if (data.state == "success") {
                         res = data;
                     }else {
                         layer.msg(data.message, { icon: 5 });//后台管理的异常弹窗
                     }
                 },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                     layer.msg(exres.info, { icon: 5 });
                 },
                 beforeSend: function () {
                 },
                 complete: function () {
                 }
             });
             return res;
         },
         // post请求方法（异步）:url地址,param参数,callback回调函数
         httpAsyncPost: function (url, param, callback) {
             $.ajax({
                 url: url,
                 data: param,
                 type: "POST",
                 dataType: "json",
                 async: true,
                 cache: false,
                 success: function (data) {
                     if (data.state == "success") {//目前项目的判断方法
                         callback(data);
                     }else {
                         layer.msg(data.message, { icon: 5 });
                     }
                 },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                     callback(textStatus);
                     layer.msg(exres.info, { icon: 5 });
                 },
                 beforeSend: function () {
                 },
                 complete: function () {
                 }
             });
         },
         // post请求方法（同步步）:url地址,param参数,callback回调函数
         httpPost: function (url, param, callback) {
             $.ajax({
                 url: url,
                 data: param,
                 type: "POST",
                 dataType: "json",
                 async: false,
                 cache: false,
                 success: function (data) {
                   //  if (data.code == httpCode.exception) {
                     if (data.state == "success") {
                         callback(data);
                     }else {
                         layer.msg(data.message, { icon: 5 });
                     }
                 },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                     callback(exres);
                     layer.msg(exres.info, { icon: 5 });//打印具体信息404 500错误
                 },
                 beforeSend: function () {
                 },
                 complete: function () {
                 }
             });
         },
         // ajax 异步封装
         httpAsync: function (url, param, type, callback) {
             $.ajax({
                 url: url,
                 data: param,
                 type: type,//请求的类型
                 dataType: "json",
                 async: true,
                 cache: false,
                 context: param,
                 success: function (data) {
                    // if (res.code == httpCode.success) {
                     if (data.state == "success") {
                         callback.apply(this, [res.data]);
                     }
                     else {
                         callback.apply(this);
                         layer.msg(data.message, { icon: 5 });//打印具体信息404 500错误
                     }
                 },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                     callback(null);
                     layer.msg(exres.info, { icon: 5 });//打印具体信息404 500错误

                 },
                 beforeSend: function () {
                 },
                 complete: function () {
                 }
             });
         },

     })

})(window.jQuery);