layUI表单提交时获取不到表单里面input框的值

提问 已结
14 737
dkisser
dkisser 2017-8-8
悬赏:5飞吻

下面是js代码:
layui.use(['layer','form'], function(){ 
var $ = layui.jquery,
layer = layui.layer,
form = layui.form();
layer.open({
type: 2
,title: false //不显示标题栏
,closeBtn: false
,area: '400px'
,shade: 0.4
,id: 'LAY_layuipro' //设定一个id,防止重复弹出
,btn: ['登录', '取消']
,moveType: 1 //拖拽模式,0或者1
,content: [getContextPath() + '/web/login/loginUI.do','no']
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.css('text-align', 'center');
btn.find('.layui-layer-btn0').attr({
"lay-filter":"login",
"lay-submit":""
});
}
,yes:function (index, layero) {

}
});

form.verify({
uname: function(value, item){
if(value.length < 5){
//验证 在web_user表中是否有此人
return '用户名不能少于5个字符';
}
}
,password: function (value, item) {
var reg = new RegExp("(.+){6,12}$","g");
if (reg.test(value)) {
return '密码必须6到12位';
}
}
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位,且不能出现空格'
]
});

form.on('submit(login)',function(data) {

$.ajax({
url:getContextPath()+"/web/login/login.do",
cache:false,
type:"POST",
data:data.feild,
dataType:"json",
success:function(result){
alert(result);
},
error:function(){
layer.alert("Ajax Error!",{title: '最终的提交信息'});
}

});

});
});

下面是html代码:
<body>
<link href="${pageContext.servletContext.contextPath }/js/layui/css/layui.css" rel="stylesheet" type="text/css">
<script src="${pageContext.servletContext.contextPath }/js/jquery.min.js"></script>
<script src="${pageContext.servletContext.contextPath }/js/layui/layui.js"></script>
<script src="${pageContext.servletContext.contextPath }/js/swh_admin.js"></script>
<fieldset class="layui-elem-field layui-field-title">
<legend>用户登录</legend>
</fieldset>
<form class="layui-form" action="http://localhost:8080${pageContext.servletContext.contextPath }/web/login/login.do" method="POST">
<div class="layui-form-item" style="margin: 10px;">
<label class="layui-form-label">用户名:</label>
<div class="layui-input-block">
<input style="width:200px;" type="text" name="uname" lay-verify="uname" autocomplete="off" placeholder="请输入用户名" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin: 10px;">
<label class="layui-form-label">密码:</label>
<div class="layui-input-block">
<input style="width:200px;" type="password" name="password" lay-verify="password" autocomplete="off" placeholder="请输入密码" class="layui-input">
</div>
</div>
</form>
<script type="text/javascript">

</script>
</body>
回帖
  • 你的btn和form不在一个体内,怎么能获取到值
    0 回复
  • dkisser
    2017-8-8
    是不是使用open里面的那个自带的button不能获取另外一个iframe层的表单数据?
    0 回复
  • thiner
    2017-8-8
    什么报错呢,在Console里面看下有没有报错,或者你用传统的取值试下呢。
    0 回复
  • 流浪狗
    2017-8-8
    你哪儿有submit?
    0 回复
  • dkisser
    2017-8-8
    @thiner 表单传到后台有值,但是data.feild中的值是空
    0 回复
  • thiner
    2017-8-8
    @dkisser
    1、传到后台有值什么意思?
    2、有值你直接插入数据库不就行了么?插入成功后给前台一个响应
    3、通过响应值前台做判断,处理相应的逻辑
    0 回复
  • thiner
    2017-8-8
    也就是这里,拿这里去做判断,做相应的跳转就可以了啊
    success:function(result){
    alert(result);
    }
    0 回复
  • dkisser
    2017-8-8
    @thiner 我的那个ajax只是测试,用来看data.field里面有没有值。这个layui只要你验证通过后form.on('submit(login)',function(){});这个里面的回调函数才能进行。我的意思就是为什么这个回调函数里面获取不到请求参数
    0 回复
  • thiner
    2017-8-8
    @dkisser 打印出来data看下
    0 回复
  • dkisser
    2017-8-8
    @thiner alert出来是undefine,console看是{}
    0 回复
  • 焱Sir
    2017-8-9
    我正在写这个类似的东西,好像是不能直接获取,可以在后台传回来,然后在success里面做判断,或者你不用弹出层的按钮,在加载页面校验。还有,用好end事件
    0 回复
  • dkisser
    2017-8-29
    @ErrorCode 改到一个body里面了之后还是alert不出来
    0 回复
  • dkisser
    2017-8-29
    @ErrorCode 但是我在另外一个页面里面用你说的这个方法又可以获取到值
    0 回复
  • @dkisser 嗯,你open方法的type是2,所以会打开一个iframe框架
    也就是会先打开一个模态对话框(标题、按钮、内容区)
    而内容区里却是一个iframe网页,所以根本不在一个页面,肯定是获取不到任何内容的
    0 回复