zoukankan      html  css  js  c++  java
  • 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 });
    	}
    }
    
    
  • 相关阅读:
    perlsplice
    perl中数组函数:delete和grep
    Python字符串格式化
    blast命令解释
    通俗解释托管与非托管
    四、GO语言的转义字符
    六、GO语言的指针
    五、GO语言的变量及数据类型
    一、GO语言的特点
    前台生成验证码案例
  • 原文地址:https://www.cnblogs.com/1ddd/p/12909517.html
Copyright © 2011-2022 走看看