search
HomeWeb Front-endLayui TutorialHow to submit post in layui

How to submit post in layui

Jul 29, 2019 am 10:05 AM
layui

How to submit post in layui

layui submit post:

table.js

//表格属性:page,elem,url,cols
//列属性:type,field,title
table.render({
        //1 开启分页
        page: true,
        //2 指定渲染的table容器
        elem: '#articleList',
        //3 异步访问的路径
        url: '../../user',
        //4 集合属性
        cols: [[
            {type: 'checkbox'},
            //4.1   普通属性
            {field: 'username', title: '用户名称',width:'11%'},
            //4.2   单选框属性
            {field: 'sex',      title: '性别',    width:'11%'},
            //4.3   复选框属性
            {field: 'status',   title: '状态',    templet: '#status',width:'11%'},
            //4.4   日期属性
            {field: 'updated',  title: '最近修改时间',width:'14%',
                //日期格式转化
                templet: function createTime(d){
                            return new Date(parseInt(d.updated)).toLocaleString()
                 }
            },  
        ]]
        
        //4.2   数字条件判断
        ,done:function(res,curr,count){
            $("[data-field='sex']").children().each(function(){
                //若选取元素为1
                if($(this).text() == '1'){
                     
                    $(this).text('男');
                //若选取元素为0
                }else if($(this).text() == '0'){
                    
                    $(this).text('女');
                }
            });
        }
    });

    //4.4   调用的日期格式转化器
     Date.prototype.toLocaleString = function() {
        var y = this.getFullYear();
        var m = this.getMonth()+1;
        m = m<10?&#39;0&#39;+m:m;
        var d = this.getDate();
        d = d<10?("0"+d):d;
        var h = this.getHours();
        h = h<10?("0"+h):h;
        var M = this.getMinutes();
        M = M<10?("0"+M):M;
        var S=this.getSeconds();
        S=S<10?("0"+S):S;
        return y+"-"+m+"-"+d;
        /*+" "+h+":"+M+":"+S*/
    };

post.js

$.post(
    //1 异步提交的urL
    &#39;${pageContext.request.contextPath}/user/add&#39;,

    //2 form表单以键值对形式传输
    data.field,

    //3 访问后成功的回调函数
    function (data) {
        if (data > 0) {
            //3.1   弹窗提示
            layer.msg("添加成功!", {icon: 1});
            //3.2  获得frame索引
            var index = parent.layer.getFrameIndex(window.name);
            //3.3   关闭当前frame
            parent.layer.close(index);
            //3.4   刷新页面
            window.parent.location.reload();
        }else{
            layer.msg("添加失败!", {icon: 1});
        }
    }
);

Recommended: layui framework tutorial

Recommended related articles:
1.How to connect layui and the backend
2.layui capture form data
Related video tutorials:
1.JavaScript Quick Start_Jade Girl Heart Sutra Series

The above is the detailed content of How to submit post in layui. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment