关于jQuery封装AJAX

首先介绍后端的操作：

 在后台进行操作时，需要提前写好评两个模块；

1. 首先进行连接mySql数据库的处理(dbMsql.js文件)

//引入mySql包
const mysql = require('mysql');

//创建mysql连接：
let mysqlObj = mysql.createConnention({ 
    host: 'localhost',
    port: 3306,
    user: 'root',
    password: 'root',
    database: 'xiaou'
});

//连接mysql数据库
mysqlObj.connect();

function execSql(sql){
return new Promise((resolved,rejected)=>{

    mysqlObj.query(sql,(err,result)=>{
    if(err){
    //失败
    resolved([false,'sql执行失败，请重试']);
    }else{
    //成功
    resolved([true,result]);  //这里的result是一个数组对象，[]
    }
});
});

}

//暴露execSql方法
mosule.exports = execSql;

2.接收返回的数据

//接口返回的数据 整个项目公共的属性  单个暴露的方法
exports.Msg = function (status, msg, data = []) {
    //data表示数据，是一个数组对象
    return data.length > 0 ? { status, msg, data } : { status, msg };
}

//图片路径
module.exports.imgHost = 'http://localhost:3000/';

//生成JWT数据  
// jwt.sign(自定义数据，密钥，{选项})
// expiresIn: 数据存储时间
// uid:已登陆的用户id
//username:已登陆的用户名
let curKeys = 'qweiotriqu1';  //密钥
module.exports.createJWT = function (uid,username) {
    return jwt.sign({ uid, username }, curKeys, { expiresIn: 60 * 60 * 2 });
}

3.最后写后端接口，这里以首页轮播图接口为例

//首页轮播图接口
router.get('/banners',async(req,res)=>{
    //查询轮播图数据
    let sql = `select id,concat('${imgHost}',image_src)as image_src,title from e_banners where isshow='1'`;

    //接收查询的数据，返回给前端   dbMsql.js文件进行处理，成功之后返回的是一个数组
    //成功   resolved([true,result]);下面的arr对应的是result数组，里面是一个数组对象，
    //也就是上面步骤二里面的

    let [err,arr] = await execSql(sql);
    if(err){
    res.send(Msg(200,'轮播图查询成功',arr));//这里返回的是一个对象{status,msg,data},data对应exexMsql上面的result数组 
    }else{
    res.send(Msg(500,'轮播图查询失败'));
    }
});

二.前端的处理

 1.首先在common.js文件内定义一个函数用来发送AJAX请求

//定义函数
function sendAjax(url,type = 'get', data = {},
dataType = 'json'){
    url = `http://127.0.0.1:3000${url}`;
    //这里的data是参数，不传参就为空
    return new Promise((resolved,rejected)=>{
    $.ajax({
    url,
    type,
    data,
    dataType,
    success:function(d){
    resulve([true,d]); //这里的e是上面返回的数组对象{status,msg,data } 
    },
    err:function(e){
    resolved([false,e]);
    }
        });

    });

}

2.在前端调用首页轮播图接口，并渲染数据

async function getBanner(){
    //接收上面步骤一发回的参数
    //    resulve([true,d]); 这时首页轮播图后台返回的数据
    let [err, obj] = await sendAjax('/banner');
    if(err){
    let arr = obj.data;//轮播图数据
    let str = '';
    let num = 0 ;
     for (let obj of arr) {
        if (num == 0) {
         str += `<li class="active" ><img src="${obj.image_src}" alt="">                        
         </li>`;
         } else {
          str += `<li><img src="${obj.image_src}" alt=""></li>`;
          }
        num++;
        //将轮播图数据渲染到页面上
        $('.img').html(str);
    }
    }else{
    console.log('轮播图调用失败');
    }
}
    getBanner();