资讯专栏INFORMATION COLUMN

通用的js前后端交互代码

Gilbertat / 1381人阅读

摘要:前言在一个项目中,前后端的交互是很频繁的。内容提示先获取的值,如果没有,获取的值。

前言

在一个项目中,前后端的交互是很频繁的。
有的是要获取一个数据,有的是要改标一个状态,有的是需要提交用户输入,有的是要上传一个文件,本文就是这么的一个代码

/**
 * 通用的js前后端交互代码
 * 依赖layer.js
 * ajaxPost处理本页提交的js请求,不对返回结果做处理,只 "显示" 或者 "刷新页面" 或者 "跳转"
 * ajaxGet同上,但是没有data选项,如果有数据发送,跟随在url中
 * ajaxFile表单文件提交
 * ajaxForm表单提交
 * 表单提交的时候,需要提交的选项用class="send-item"标识,默认必填项。
 * 内容提示先获取data-msg的值,如果没有,获取palceholder的值。
 * 如果不是必填项,需要添加no-required,即class="send-item no-required"
 * 表单带有文件上传的时候有两种,一种是先上传文件,获得返回值即文件的存储路径,提交表单的时候提交文件存储路径,请使用ajaxForm
 * 如果文件内容跟随表单提交,请使用ajaxFile
 */
function ajaxPost(url, data){
    layer.closeAll("msg");
    layer.load();
    $.ajax({
        url: url,
        data: data,
        type: "post",
        dataType: "json",
        success: function(res){
            success(res);
        }
    })
}
function ajaxGet(url){
    layer.closeAll("msg");
    layer.load();
    $.ajax({
        url: url,
        type: "get",
        dataType: "json",
        success: function(res){
            success(res);
        }
    })
}
function ajaxFile($form,tips){
    layer.closeAll("msg");
    var url = $form.prop("action");
    var data = new FormData();
    var status = true;
    $form.find(".send-item").each(function(index,elem){
        if(!status){
            return false;
        }
        var name = elem.name;
        var value = elem.value;
        var type = elem.type;
        var msg = $(elem).data("msg") || elem.placeholder;        
        if(type != "password"){
            value = value.trim();
        }
        if(elem.type == "checkbox" && !elem.checked){
            if(tips){
                layer.tips(msg, $(elem), {tips: 2, time: 1e3});
            }else{
                layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
            } 
            status = false;
        }
        if(elem.type == "file" && !elem.files[0]){
            if(tips){
                layer.tips(msg, $(elem).parent(), {tips: 2, time: 1e3});
            }else{
                layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
            } 
            status = false;
        }
        if(status && value == "" && !$(this).hasClass("no-required")){
            if(tips){
                layer.tips(msg, $(elem), {tips: 2, time: 1e3});
            }else{
                layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
            } 
            status = false;
        }
        if(elem.type == "file"){
            var file = elem.files[0];
            data.append("upload[]", file, file.name);
        }else{
            data.append(name,value);
        }
    });
    if(!status){
        return false;
    }
    layer.load();
    $.ajax({
        url: url,
        data: data,
        type: "post",
        processData: false,
        contentType: false,
        dataType: "json",
        success: function(res){
            success(res);
        }
    })
}
function ajaxForm($form,tips){
    var url = $form.prop("action");
    var data = {};
    var status = true;
    $form.find(".send-item").each(function(index,elem){
        if(!status){
            return false;
        }
        var name = elem.name;
        var value = elem.value;
        var type = elem.type;
        var msg = $(elem).data("msg") || elem.placeholder;
        if(type != "password"){
            value = value.trim();
        }
        if(elem.type == "checkbox" && !elem.checked){
            if(tips){
                layer.tips(msg, $(elem), {tips: 2, time: 1e3});
            }else{
                layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
            }            
            status = false;
        }
        if(status && value == "" && !$(this).hasClass("no-required")){
            if(tips){
                layer.tips(msg, $(elem), {tips: 2, time: 1e3});
            }else{
                layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
            }
            status = false;
        }
        data[name] = value;
    });

    if(!status){
        return false;
    }
    layer.load();
    $.ajax({
        url: url,
        data: data,
        type: "post",
        dataType: "json",
        success: function(res){
            success(res);
        }
    })
}

function success(res){
    /**
     * @res = {status: 1, msg: "", url: ""};
     * @status => 0 失败  
     * @status => 1 成功
     * @msg => "提示"
     * @url => "reload" 页面需要刷新
     * @url => "/base" 页面跳转到"/base"
     */
    layer.closeAll("loading");
    if(res.msg){
        layer.msg(res.msg, {icon: res.status, time: 2e3, maxWidth: 260}, function(){
            if(res.url == "reload"){
                window.location.reload();
                return false;
            }
            if(res.url){                        
                window.location.href = res.url;
            }
        });
    }else{
        if(res.url == "reload"){
            window.location.reload();
            return false;
        }
        if(res.url){                        
            window.location.href = res.url;
        }
    }
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109460.html

相关文章

  • moky = (mock + proxy) // 一个简洁通用前后协作工具

    摘要:现在一般需要分前后端,因为大量前端框架和工具链的涌入根源是需求复杂了,让前端可以跟后端独立开来。但是,无论是前端去写模板,亦或是完全前后端分离去写,都脱离不了与后端进行数据交互。 showImg(https://segmentfault.com/img/remote/1460000007317424?w=350&h=113); --> GitHub地址 旧石器时代,Web 开发并不会去...

    miqt 评论0 收藏0
  • 前后架子搭建

    摘要:开发语言前端前端这里使用,打包工具是后端后端使用的语言依旧是熟悉的,使用搭建后端框架。 前言 作为一名前端开发者,了解一些后端语言,成为半个全栈工程师也是最基本的(23333),就本篇文章,给大家介绍一下我的前后端目录结构,不喜勿喷,也希望各位给我一些意见,哈哈哈。 开发语言 前端 前端这里使用react.js,打包工具是parcel 后端 后端使用的语言依旧是熟悉的node.js,使...

    mikyou 评论0 收藏0
  • WEB程序前后数据交互流程

    摘要:说明我写这篇文章的目的其实是想科普一下基础的数据传输和交互流程,其实也就是写协议相关的一些东西。同样,相对于后端程序来说也无外乎就是一大堆有一定意义的字符串,而对于脚本来说,就是表示一个数据对象。 说明 我写这篇文章的目的其实是想科普一下基础的数据传输和交互流程,其实也就是写http协议相关的一些东西。而写这篇文章也主要是源于最近和长久以来很多人问的问题都是有关于这块的(可能问题并不是...

    oysun 评论0 收藏0
  • React同构直出优化总结

    摘要:同构的关键要素完善的属性及生命周期与客户端的时机是同构的关键。的一致性在前后端渲染相同的,将输出一致的结构。以上便是在同构服务端渲染的提供的基础条件。可以将封装至的中,在服务端上生成随机数并传入到这个中,从而保证随机数在客户端和服务端一致。 原文地址 React 的实践从去年在 PC QQ家校群开始,由于 PC 上的网络及环境都相当好,所以在使用时可谓一帆风顺,偶尔遇到点小磕绊,也能够...

    alaege 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<