分别使用jQuery封装的ajax、原生ajax、fetch、axios实现express前后端交互

        目前在做的项目我主要是用jQuery封装的ajax来实现前后端的交互，由于老师希望在前端使用原生js，所以让我们在前后端数据交互这块尝试其他的方法。

前后端数据交互—Ajax、Fetch 和 Axios 优缺点及比较https://baijiahao.baidu.com/s?id=1709840036410376001&wfr=spider&for=pc

        目录结构以及其他部分参考上篇，本篇文章仅修改c-test.js文件。

链接在此https://blog.csdn.net/ZengJiajia0325/article/details/126005445

c-test.js：

// ajax  jQuery版
function onBtnClick(){
    var name=$('#name').val();
    console.log(name);
    $('#t').text(name);
    $.post('/test',
    {
        username:name
    },
    function(data){    
        console.log(data);
        alert(data.msg);
        var rs=data.data;
        var sex;
        if(rs[0].sex==1){
            sex="男";
        }else{
            sex="女";
        }
        var str="
";
        str+="
"+sex+"
";
        str+="
";
        $('#t').append(str);
    },"json");
}



// ajax 原生js版
/*
type 代表 请求方式
url  代表 请求url路径
data 代表 发送数据
success 代表 下载数据成功以后执行的函数
error   代表 下载数据失败以后执行的函数
*/
function $ajax({type = "get", url, data, success, error}){
    var xhr = null;
    try{
        xhr = new XMLHttpRequest();
    }catch(error){
        xhr = new ActiveXObject("Microsoft.XMLHTTP")
    }
    
    if(type == "get" && data){
        url += "?" + querystring(data);
    }

    xhr.open(type, url, true);

    if(type == "get"){
        xhr.send();
    }else{
         //设置提交数据格式
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        data ? xhr.send(querystring(data)) : xhr.send();
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                if(success){
                    success(xhr.responseText);
                }
            }else{
                if(error){
                    error("Error：" + xhr.status);
                }
            }
        }
    }
}

function querystring(obj){
    var str = '';
    for(var attr in obj){
        str += attr + "=" + obj[attr] + "&";
    }
    return str.substring(0, str.length - 1);
}

function onBtnClick1(){
    var name=document.getElementById('name').value;
    console.log(name);
    var t=document.getElementById('t');
    t.innerHTML=name;
    $ajax({
        type: "post",
        url: "/test",
        data: {
            username: name
        },
        success: function(data){
            console.log(data);
            data=JSON.parse(data);
            alert(data.msg);
            var rs=data.data;
            var sex;
            if(rs[0].sex==1){
                sex="男";
            }else{
                sex="女";
            }
            var str="
";
            str+="
"+rs[0].realname+"
";
            str+="
";
            var ul=document.createElement('ul');
            var li=document.createElement('li');
            li.innerHTML=sex;
            ul.appendChild(li);
            t.appendChild(ul);
        },
        error: function(msg){
            alert("POST请求数据错误：" + msg);
        }
    })
}

/**
 * @description 事件绑定，兼容各浏览器
 * @param target 事件触发对象 
 * @param type   事件
 * @param func   事件处理函数
 */
function addEvents(target, type, func) {
    if (target.addEventListener)    //非ie 和ie9
        target.addEventListener(type, func, false);
    else if (target.attachEvent)   //ie6到ie8
        target.attachEvent("on" + type, func);
    else target["on" + type] = func;   //ie5
}



// fetch版
function onBtnClick2(){
    var name=document.getElementById('name').value;
    console.log(name);
    var t=document.getElementById('t');
    t.innerHTML=name;
    fetch('/test', {
        method:'POST',
        headers:{ 'Content-Type': 'application/json' },
        body: JSON.stringify({
            username: name
        })
    })
    .then(e => e.json())
    .then((data) => {
        console.log(data);
        alert(data.msg);
        var rs=data.data;
        var sex;
        if(rs[0].sex==1){
            sex="男";
        }else{
            sex="女";
        }
        var str="
";
        str+="
"+rs[0].realname+"
";
        str+="
";
        var ul=document.createElement('ul');
        var li=document.createElement('li');
        li.innerHTML=sex;
        ul.appendChild(li);
        t.appendChild(ul);
    })
    .catch(e => console.log("error", e))
}



// axios版
function onBtnClick3(){
    var name=document.getElementById('name').value;
    console.log(name);
    var t=document.getElementById('t');
    t.innerHTML=name;
    axios.post('/test', {
        username: name
    })
    .then(function (res) {
        console.log(res);
        var data=res.data;
        alert(data.msg);
        var rs=data.data;
        var sex;
        if(rs[0].sex==1){
            sex="男";
        }else{
            sex="女";
        }
        var str="
";
        str+="
"+rs[0].realname+"
";
        str+="
";
        var ul=document.createElement('ul');
        var li=document.createElement('li');
        li.innerHTML=sex;
        ul.appendChild(li);
        t.appendChild(ul);
    })
    .catch(function (error) {
        console.log(error);
    });
}



function init() {
    // jquery
    // $('#btn').on('click',onBtnClick);

    // 原生ajax
    var btn=document.getElementById('btn');
    addEvents(btn,'click',onBtnClick1);

    // fetch
    // addEvents(btn,'click',onBtnClick2);

    // axios
    // addEvents(btn,'click',onBtnClick3);

}

init();

使用时在init中注释相应代码即可。

说明：此次实现的功能是输入用户名显示性别，所以数据库需要相应修改，至少需包含username和sex两个字段。其中，1表男，2表女。