• Layui表单提交之精简再精简


    表单验证真的是麻烦,作为代码搬运工真心觉得Layui很强大,让只会一丢丢前端的我有了福音,但我并不满于现状,于是我想再将Layui优化更简单的调用,让我们站在巨人肩膀上吃饭吧!!!

    引用核心

    Layui
    Jquery

    绑定事件

    执行操作

    界面一

    LayFormHandle.FormSubmitBind("/api/", "DEMO_Submit");
    

    界面二

    LayFormHandle.FormSubmitBind("/api/", "DEMO_Submit2");
    

    需要注意

    1. 如果返回数据不同请修改 CallBackData,建议返回数据修改成一致

    核心代码

    
    //通用Layui表单提交
    var LayFormHandle = {
    	FormSubmitBind: function (_url, _filter) {
    		layui.form.on("submit(" + _filter + ")", function (obj) {
    			PageHandle.HttpHandle.jqPost(_url, false, obj.field, function (res) {
    				CallBackData(res);
    			});
    			return false;
    		}.bind(this));
    	}
    };
    
    
    //页面上的请求
    var PageHandle = {
    	HttpHandle: {
    		jqPost: function (url, async, model, ICallBack) {
    			$.ajaxSettings.async = async;
    			$.post(url, model, function (res) {
    				ICallBack(res);
    			});
    			return this;
    		}
    	}
    };
    
    //这些代码看着修改
    var CallBackData = function (data) {
    	if (data.states) {
    		layer.msg(data.msg, { icon: 6 });
    		setTimeout(function () {
    			if (data.url == "") {//url为空 F5刷新下页面
    				window.location.reload();
    			} else if (data.url != "vcode" && data.url != "null") {//验证码错误不刷新页面,url==null也不刷新,否则就直接跳转到url
    				window.location.href = data.url;
    			}
    		}, 2000);
    	} else {
    		layer.msg(data.msg, { icon: 8 });
    	}
    }
    
    
  • 相关阅读:
    selenium headlesschrome下设置最大窗口模式
    lxml简明教程
    lxml etree的一个问题
    pycharm导入模块的时候遇到的两个错误
    linux下安装python
    【Android进阶学习】shape和selector的结合使用
    ANDROID资源文件【转】
    android 屏幕适配问题【转】
    android UI进阶之style和theme的使用
    Android入门第十六篇之Style与Theme [转]
  • 原文地址:https://www.cnblogs.com/1ddd/p/12909517.html
Copyright © 2020-2023  润新知