zoukankan      html  css  js  c++  java
  • layui之ajax巨坑

    在使用layui做前端框架的时候,在请求ajax时,回调函数不执行问题,找了各种原因,各种的更改ajax参数类型和webapi返回类型 各种不行,最后发现layui默认是form提交,想要让他执行ajax回调就只是一句话 return false 看代码

    layui.use(['form', 'layer'], function () {
    $ = layui.jquery;
    var form = layui.form
    ,layer = layui.layer;

    //自定义验证规则
    form.verify({
    nikename: function (value) {
    if (value.length < 5) {
    return '昵称至少得5个字符啊';
    }
    }
    , pass: [/(.+){6,12}$/, '密码必须6到12位']
    , repass: function (value) {
    if ($('#L_pass').val() != $('#L_repass').val()) {
    return '两次密码不一致';
    }
    }
    });

    以上只是框架加载部分

    //监听提交
    form.on('submit(add)', function (data) {
    if (post_adduser) return;
    post_adduser = true;
    var UserName = $("#username").val();
    var Password = $("#L_pass").val();
    var FullName = $("#L_email").val();
    var Phone = $("#phone").val();
    var index = document.getElementById("Dropplace").selectedIndex;
    var p = document.getElementById("Dropplace").options[index].value;
    var index1 = document.getElementById("Droproles").selectedIndex;
    var c = document.getElementById("Droproles").options[index1].value;
    var RoleIDs = p + "||" + c;
    var loading = layer.load(1);
    var user = "{"UserName":"" + UserName + "","Password":"" + Password + "","FullName":"" + FullName + "","Phone":"" + Phone + "","RoleIDs":"" + RoleIDs + ""}";
    $.ajax({
    url: "http://xxxxxxxxxxxxxx/api/User/AddUser",
    //dataType: 'text',
    contentType: "application/json",
    data: user, //请求的附加参数,用json对象
    method: 'POST',
    success: function (res) {
    if (res == true) {
    post_adduser = false;
    layer.close(loading);
    layer.msg("添加成功", { icon: 6, time: 2000 }, function () {
    // 获得frame索引
    parent.location.reload();
    var index = parent.layer.getFrameIndex(window.name);
    //关闭当前frame
    parent.layer.close(index);
    });
    }
    else {
    post_adduser = false;
    layer.close(loading);
    layer.msg("添加失败", { icon: 5 });
    }

    },
    error: function () {
    post_adduser = false; //AJAX失败也需要将标志标记为可提交状态
    layer.close(loading);
    layer.msg("添加失败", { icon: 5 });
    }
    });
    return false;//只此一句

  • 相关阅读:
    几种常见的软件体系结构及特点分析
    mvc模式
    代理模式 补充
    软件架构体系风格
    大道至简之编程的精义读后感-Java伪代码
    MVC架构模式实例
    浅谈模型-视图-控制器模式
    《大型网站技术架构:核心原理与案例分析》读后感
    质量属性分析
    构架漫谈读后感之软件架构师的工作
  • 原文地址:https://www.cnblogs.com/glb79809-glb/p/14062866.html
Copyright © 2011-2022 走看看