通过ajax将jsp做的登录放在弹出框中提交时不能传递值 2C

RT,下面是代码:
一:这是主页面单出窗的代码:

 <p id="login_reg">
                                <a class="btn btn-large btn-success"><b>登录/注册 </b></a>
                            </p>

                            <script>
        $('#login_reg').click(function() {
            layer.open({
                title : '登录/注册页面',
                time : 0,
                type : 1,
                skin : 'layui-layer-rim', //加上边框
                area : [ '1000px', '500px' ], //宽高
                content : $('#login_reg_window')
            });
        })
    </script>
    <script>
        $("#login_frame").load(
                "${pageContext.request.contextPath}/page/bizPage/login.jsp",
                function(response, status, xhr) {
                    $('#login_frame').html(response);
                });
    </script>
    <script>
        $("#register_frame").load(
                "${pageContext.request.contextPath}/page/bizPage/register.jsp",
                function(response, status, xhr) {
                    $('#register_frame').html(response);
                });
    </script>

二:被调用的jsp代码

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录页_房屋中介网站</title>
<link rel="stylesheet"
    href="${pageContext.request.contextPath}/ui/bs/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid" id="login_frame">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <h1 style="text-align: center">登录</h1>
                <form class="form-horizontal" id="login_form" method="post"
                    style="padding-top: 50px; padding-bottom: 100px">
                    <div class="form-group">
                        <label for="user_account" class="col-sm-2 control-label">
                            用户名 </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="user_account"
                                name="user_account" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="user_password" class="col-sm-2 control-label">
                            密码 </label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control"
                                id="user_password" name="user_password" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"> </label>
                        <div class="col-sm-10">
                            <div class="form-group">
                                <div class="col-sm-4">
                                    <input type="checkbox" name="set_login_cookies" /> 下次自动登录
                                </div>
                                <div class="col-sm-7">
                                    <div class="form-group">
                                        <div class="col-sm-10">
                                        </div>
                                        <div class="col-sm-2">
                                            <input type="submit" class="btn btn-primary" id="login_button" value="登录">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>

    <script src="${pageContext.request.contextPath}/ui/bs/js/jquery.min.js"></script>
    <script
        src="${pageContext.request.contextPath}/ui/bs/js/bootstrap.min.js"></script>
    <script>
    $(function() {
            $('#login_button').unbind("click").bind("click",function() {
                                $.ajax({
                                    type : 'POST',
                                    url : '${pageContext.request.contextPath}/userBiz',
                                    dataType : 'json',
                                    data : "user_account="+$("#user_account").val()+"&user_password="+$("#user_password").val()+"&action=login",                                                                                
                                    //data: "user_account=admin&user_password=admin&action=login",
                                    success : function(msg){
                                        if(msg.result==1){
                                            alert("登陆成功");
                                            location.reload();
                                        }else{
                                            alert(msg.msg);
                                        }               
                                    }
                                        })
                            })
        })
    </script>
</body>
</html>

如果单独使用登录页面的话后台可以接收到输入的用户名密码,但是通过主页面弹出到后,后台就接收不到用户名密码

5个回答

通过序列化form表单的方式提交到后台,过程中可能需要转换成JSON,以便后台直接拿到Mapping好数据的Object

var savingFormData = $('#'+formId).serializeObject();
var formData = formatNonstandardData2JSON(savingFormData);

$.ajax({
    headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
    },
        type: "POST",
        url: url,
        data: formData,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.responseText);
    },
        success: function(data) {
            sucFunc(data);
        }
    });

function formatNonstandardData2JSON(data){
    var newData = new Object();
    var m = 1;
    for(i in data){
        var obj = formatOneElement(i, data[i]);
        newData = $.extend(true, newData, obj);
        m++;
    }
    return JSON.stringify(newData);
}

beamofsoul
beamofsoul $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [ o[this.name] ]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; };
接近 3 年之前 回复

这个标签的type改成一般的类型, 绑定一个点击事件看看

input type="submit" class="btn btn-primary" id="login_button" value="登录"

li_0x79d1_0x9510
li_0x79d1_0x9510 type那里都试过了 和那里没有关系
接近 3 年之前 回复

data:{a:avalue,b:bvalue}
后台通过参数名获取,如果是中文参数,记得编码解码,肯定是可以传的。你先做个简单的例子验证下,再来改。

beijing20110905
微风吹过的夏天2016 回复li_0x79d1_0x9510: 搞一个简单页面,只保留form ,input,button测试下,成功了再套你现在的代码。
接近 3 年之前 回复
beijing20110905
微风吹过的夏天2016 回复li_0x79d1_0x9510: <input>可能写错了,检查下form和input。
接近 3 年之前 回复
li_0x79d1_0x9510
li_0x79d1_0x9510 后面我跟了个action=login login传到了 输入的用户名和密码都是"" 回调也完成了,传回的参数也alert出来了
接近 3 年之前 回复
li_0x79d1_0x9510
li_0x79d1_0x9510 麻烦看下这个问题:http://ask.csdn.net/questions/379690 这个是最终发现的,传是成功了,就是js没有拿到input里面的东西
接近 3 年之前 回复

input type="submit" 按钮的,submit改成button取消默认的提交行为。

li_0x79d1_0x9510
li_0x79d1_0x9510 这些都改过了
接近 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问