Question

注册表格：

{!! Form::open(['route' => 'api.register', 'method' => 'post', 'id' => 'register_form']) !!}
    <div class="form-group">
        <div class="inputer">
            <div class="input-wrapper">
                <input id="register_name" type="text" class="form-control" placeholder="Enter your full name">
            </div>
        </div>
    </div>
    <!--.form-group-->
    <div class="form-group">
        <div class="inputer">
            <div class="input-wrapper">
                <input id="register_email" type="email" class="form-control" placeholder="Enter your email address">
            </div>
        </div>
    </div>
    <!--.form-group-->
    <div class="form-group">
        <div class="inputer">
            <div class="input-wrapper">
                <input id="register_pass" type="password" class="form-control" placeholder="Enter your password">
            </div>
        </div>
    </div>
    <!--.form-group-->
    <div class="form-group">
        <div class="inputer">
            <div class="input-wrapper">
                <input id="register_confirm" type="password" class="form-control" placeholder="Enter your password again">
            </div>
        </div>
    </div>
    <!--.form-group-->
    <div class="form-group">
        <label>
            <input type="checkbox" name="remember" value="1"> I have read and agree to the term of use.
        </label>
    </div>
    <div class="form-buttons clearfix">
        <button class="btn btn-white pull-left show-pane-login">Cancel</button>
        <button id="register_submit" class="btn btn-success pull-right">Sign Up</button>
    </div>
    <!--.form-buttons-->
 {!! Form::close() !!}

JS：

        $("#register_form").submit(function(e) {
            e.preventDefault();
        });
        $('#register_submit').click(function()
        {
            var address = $('#register_form').attr('action');
            var method = $('#register_form').attr('method');
            var user_name = $('#register_name').val();
            var mail = $('#register_email').val();
            var pass = $('#register_pass').val();
            var pass_confirm = $('#register_confirm').val();
            var name = $("input[name=_token]").val();
            $.ajax({
                url: address,
                type: method,
                data:
                    {
                        name: user_name,
                        email: mail,
                        password: pass,
                        password_confirm : pass_confirm,
                        _token: name
                    },
                success:function(response) {
                    alert(response);
                },
                error:function(response) {
                    alert(response);
                },
            });
        });

路线：

Route::post('/processregister', ['as' => 'api.register', 'uses' => 'AuthController@register']);

注册功能：

public function register(Request $request)
    {
        return $request->name;
    }

在 webportal.dev/processregister，它会显示空白页。这意味着请求参数发送保持为空。我哪里错了？

（也许是冲突？在同一页面上还有一个登录表单，但它是由单独的函数提交的，并且登录表单可以正常工作。）

Answer 1

由于“提交”按钮中存在一个非常常见的错误。

默认情况下，<button>按钮type=submit将提交表单，除非您通过event.preventDefault()功能中的$('#register_submit').click()停止默认行为。默认行为在响应AJAX调用之前运行，并转发到action标记中指定的<form>属性中的URL（即http://webportal.dev/processregister）

在您的情况下，您还可以将按钮类型更改为button，以避免此表单提交行为。

Answer 2

删除此行中的type="submit"：

<button id="register_submit" type="submit" class="btn btn-success pull-right">Sign Up</button>

还要确保你的ajax代码真的被调用了。

Answer 3

根据评论，问题是由于您的视图被缓存。因为我能够运行完全相同的代码来生成预期的结果。下次尝试运行php artisan view:clear以清除缓存视图，作为调试视图错误的第一步。也总是发布寻求帮助时使用的代码而不是生成的代码。

另一个提示是为表单输入分配名称而不是id，然后在ajax请求中序列化表单数据。您保存了通过它获取每个输入值的所有工作，然后使用它。

Answer 4

为什么不在.submit函数中移动所有代码，最后只添加return false;？

$("#register_form").submit(function(e) {
    var address = $('#register_form').attr('action');
    var method = $('#register_form').attr('method');
    var user_name = $('#register_name').val();
    var mail = $('#register_email').val();
    var pass = $('#register_pass').val();
    var pass_confirm = $('#register_confirm').val();
    var name = $("input[name=_token]").val();
    $.ajax({
        url: address,
        type: method,
        data:
            {
                name: user_name,
                email: mail,
                password: pass,
                password_confirm : pass_confirm,
                _token: name
            },
        success:function(response) {
            alert(response);
        },
        error:function(response) {
            alert(response);
        },
    });

    return false;
});

请在开发人员工具（F12）中查看您的ajax请求会发生什么情况＆gt;网络选项卡。也许服务器端有错误。

AJAX发送空值

4 个答案: