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;//只此一句

  • 相关阅读:
    java类实现 指定网站信息采集
    通过jxl.jar 读取、导出excel的小例子
    SQL使用CASE WHEN THEN
    动态查询的实现
    Oracle 查询存储过程 做横向报表
    文本信息 生成二维码 例子
    将对象转换为指定的Map
    eclipse 插件大全
    让人看了舒服的清爽颜色搭配CSS
    spring 定时任务 实现
  • 原文地址:https://www.cnblogs.com/glb79809-glb/p/14062866.html
Copyright © 2011-2022 走看看