html:
<div class="layui-form-item">
<label class="layui-form-label"> 加油站：</label>
<div class="layui-input-block">
{volist name="jyzlist" id="vo"}
<input type="radio" name="site_id" class="layui-input" value="{$vo.id}" title="{$vo.title}" lay-filter="jyzfilter">
{/volist}
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">加油员：</label>
<div class="layui-input-block" id="jiayouyuan"></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"> 是否跨站：</label>
<div class="layui-input-inline">
<input type="checkbox" name="is_limit" lay-text="是|否" lay-skin="switch" class="layui-input" value="1" lay-filter="is_limit" {eq name='$login_set.login_phone' value="1" }checked{/eq}>
</div>
</div>
<div class="layui-form-item" id="washer">
<label class="layui-form-label"> 洗车机ID：</label>
<div class="layui-input-block">
{volist name="wahsercar" id="vo"}
<input type="checkbox" name="limit_washer_id[]" class="layui-input" value="{$vo.id}" title="{$vo.name}">
{/volist}
</div>
</div>
<script>
layui.use('form',function(){
form=layui.form;
//触发switch开关
form.on('switch(is_limit)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //开关是否开启，true或者false
console.log(data.field.is_limit); //只有开关为"是",该变量才能显示on,否则字段为空
if(data.elem.checked==false){
$("#washer").show();
}else{
$("#washer").hide();
}
});
//点击加油站选中后下面的单选是当前加油站下的员工
form.on('radio(jyzfilter)', function(data){
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
$.post('/admin/washercounts/lwaiter',{id:data.value},function(obj){
list=obj.data;
html='';
$.each(list,function(index,val){
html +='<input type="radio" name="work_id" class="layui-input" value="'+val.id+'" title="'+val.u_name+'">';
})
$("#jiayouyuan").empty();
$("#jiayouyuan").append(html);
form.render('radio');
})
});
})
</script>
第二部分：使用ajax获取表单数据传给后台Php操作。
<form class="layui-form"> //没有layui-form提交不了
<div class="login-box-width">
<div class="form-box clearfix">
<input type="text" name="username" lay-verify="required" id="loginAccount" placeholder="会员名" />
</div>
<div class="form-box clearfix">
<input type="password" name="password" lay-verify="required" id="loginPassWord" placeholder="密码" />
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="checkbox" name="purview" lay-skin="primary" title="管理员页面" value="admin/index" >
<input type="checkbox" name="purview" lay-skin="primary" title="添加管理员页面" value="admin/adduser" >
<input type="checkbox" name="purview" lay-skin="primary" title="执行添加管理员" value="admin/insertuser" >
<!-- {volist name="book_list" id="vo"}
<input type="checkbox" lay-verify='required' name="books" title="{$vo.title}" class="layui-input" value="{$vo.id}"
{eq name='$chat_data["books"][$key] ?? ""' value="$vo.id" }checked{/eq}>
{/volist}-->
</div>
</div>
<div class="form-box clearfix">
<input type="text" name="code" lay-verify="required" id="loginsignincode" placeholder="验证码" />
<div class="fr">
<img onclick="this.src='{:captcha_src()}?'+Math.random()" src="{:captcha_src()}" alt="captcha" class="VcodeImg" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">上传图片</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="uploadClick">
<i class="layui-icon"></i>上传图片
</button>
<div class="layui-upload-list">
<img class="layui-upload-img" width="100px" height="100px" id="showPic">
<p id="demoText"></p>
</div>
<input type="hidden" name="product_icon" id="pichidden">
</div>
</div>
<button lay-submit lay-filter="myform" class="btn" style="width: 100%">登录</button>
</form>
<script type="text/javascript">
layui.use(['form','upload'],function(){
var form=layui.form;
//监听提交事件
form.on('submit(myform)',function(obj){
//obj.field打印出是：Object { username: "139691990", password: "139691990", code: "7qz4" }
//fields=JSON.stringify(obj.field); //打印出是{"username":"139691990","password":"139691990","code":"7qz4"}
var duoxuan= [];//复选框字段
$('input[name=purview]:checked').each(function() {
duoxuan.push($(this).val());
});
obj.field.purview=duoxuan;
fields=JSON.stringify(obj.field);
$.ajax({
type: "POST",
url: "logs",
data: {"val": fields},
success: function (result) {
layer.close(loading);
if (result.code== 1000) {
layer.msg(result.msg,{icon:1})
} else {
layer.msg(result.msg,{icon:2})
$(".VcodeImg").attr('src',"{:captcha_src()}?"+Math.random());//出错后自动更新验证码
}
}
});
return false;
})
//创建一个上传实例
upload.render({
elem:"#uploadClick",
url:"__MODULE__/allow/upload?field=product_icon",
accept:"images",//允许上传的文件类型
acceptMime:"image/jpg,image/png,image/jpeg",//打开文件选择框时允许显示的文件类型
exts:'jpg|png|jpeg',//允许上传的文件后缀
size:30,//允许上传的文件大小
auto:true,//选中文件自动上传
field:'product_icon',
before:function(obj){
//预览
obj.preview(function(index,file,result){
$('#showPic').attr('src',result);
})
},done:function(res){
if(res.code==1000){
$('#pichidden').attr('value',res.data);
layer.msg(res.msg,{icon:1});
}else{
layer.msg(res.msg,{icon:2});
}
}
})
})
</script>
后台php操作：
//获取请求信息
// input('val')打印出的数据：Object { code: 1001, msg: "验证码错误，请重新输入！", data: "{"username":"13969198590","password":"13969198590","code":"7qz4"}" }
$req=htmlspecialchars_decode(input('val')) ;//实体转字符
$request=json_decode($req,true);//解析json为纯数组
//执行产品图片上传
public function upload($field){
//获取请求的数据
$file=request()->file($field);
$info=$file->move(ROOT_PATH.'public'.DS.'static'.DS.'admin'.DS.'image'.DS.$field);
if($info){
return json(['code'=>1000,'msg'=>'上传成功','data'=>$info->getSaveName()]);
}else{
return json(['code'=>1001,'msg'=>$file->getError(),'data'=>'']);
}
}