摘要:前言在一个项目中,前后端的交互是很频繁的。内容提示先获取的值,如果没有,获取的值。
前言
在一个项目中,前后端的交互是很频繁的。
有的是要获取一个数据,有的是要改标一个状态,有的是需要提交用户输入,有的是要上传一个文件,本文就是这么的一个代码
/** * 通用的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
摘要:现在一般需要分前后端,因为大量前端框架和工具链的涌入根源是需求复杂了,让前端可以跟后端独立开来。但是,无论是前端去写模板,亦或是完全前后端分离去写,都脱离不了与后端进行数据交互。 showImg(https://segmentfault.com/img/remote/1460000007317424?w=350&h=113); --> GitHub地址 旧石器时代,Web 开发并不会去...
摘要:说明我写这篇文章的目的其实是想科普一下基础的数据传输和交互流程,其实也就是写协议相关的一些东西。同样,相对于后端程序来说也无外乎就是一大堆有一定意义的字符串,而对于脚本来说,就是表示一个数据对象。 说明 我写这篇文章的目的其实是想科普一下基础的数据传输和交互流程,其实也就是写http协议相关的一些东西。而写这篇文章也主要是源于最近和长久以来很多人问的问题都是有关于这块的(可能问题并不是...
摘要:同构的关键要素完善的属性及生命周期与客户端的时机是同构的关键。的一致性在前后端渲染相同的,将输出一致的结构。以上便是在同构服务端渲染的提供的基础条件。可以将封装至的中,在服务端上生成随机数并传入到这个中,从而保证随机数在客户端和服务端一致。 原文地址 React 的实践从去年在 PC QQ家校群开始,由于 PC 上的网络及环境都相当好,所以在使用时可谓一帆风顺,偶尔遇到点小磕绊,也能够...
阅读 3112·2021-11-22 12:01
阅读 3714·2021-08-30 09:46
阅读 759·2019-08-30 13:48
阅读 3157·2019-08-29 16:43
阅读 1628·2019-08-29 16:33
阅读 1822·2019-08-29 13:44
阅读 1382·2019-08-26 13:45
阅读 2203·2019-08-26 11:44