//用一个div把所有的输入框和提交按钮包括起来 并在该div的class中引入"layui-form"
<div class="yiBox layui-form">
    <div class="tiTxt">网站建议</div>
    <div class="mingBox ">
        <input type="text" class="mingput"  name="title" placeholder="姓名" />
        <input type="text" class="huaput"  name="phone" placeholder="联系电话" />
        //提交按钮div 中添加lay-filter="user-set-info" lay-submit
        <div class="subBox" lay-filter="user-set-info" lay-submit>提交</div>
    </div>
    <textarea class="tiarea"  name="content" placeholder="建议留言"></textarea>
</div>
//引入layui.js
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(function(){
        var $ = layui.jquery;
        var form = layui.form;
        //根据user-set-info按钮标识获取点击事件
        form.on('submit(user-set-info)', function(data){
            var field = data.field;
            $.ajax({
                type:'post',
                 //要提交的后台接口地址
                url:"{:url('User/add_cunsult')}",
                data:field,
                dataType:"json",
                //接口的返回值存入data变量
                success:function(data){
                    //判断返回值中的code码
                    if(data.code == 0){
                        //向页面输出返回值中的msg
                        layer.msg(data.msg,{icon:6,tiye:2000},function(){
                            //刷新页面
                            location.reload();
                        });
                    } else {
                        layer.open({title:"保存失败",content:data.msg,icon:5,anim:6});
                    }}
            });
            return false;
        });
    });
</script>

代码分为两部分,第一部分是html用于定义要提交的变量名和提交按钮。第二部分是js部分,引入layer.js监听点击事件,提交数据到接口并处理返回值。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐