Question

我正在尝试在我的页面上提交表单而不刷新它，使用jquery和ajax，我也在使用laravel。

网址会重定向到更新表单数据的路由。

e.preventDefault（）无法正常工作，看到很多帖子和解决方案对我来说都没有用，我希望它不是显而易见的，我没有看到它。

我尝试了很多东西，但仍无法弄清楚问题出在哪里。

FORM

{{ Form::open(array('method'=>'post','class'=> 'profile_form ajaxpasswordreset','url'=>'/resetpassword')) }}
                <label for="old_password"> Current Password </label>    
                <div class="form-group">
                    {!! Form::password('old_password', ['class'=>'form-control']) !!}
                    @if ($errors->has('old_password'))
                        <span class="help-block">
                            <strong>{{ $errors->first('old_password') }}</strong>
                        </span>
                    @endif
                </div>
                <div class="form-group">
                    <label for="old_password"> New Password </label>    
                    {!! Form::password('password', ['class'=>'form-control']) !!}
                    @if ($errors->has('password'))
                        <span class="help-block">
                            <strong>{{ $errors->first('password') }}</strong>
                        </span>
                    @endif
                </div>
                <div class="form-group">
                    <label for="old_password"> Password confirmation </label>    
                    {!! Form::password('password_confirmation', ['class'=>'form-control']) !!}
                    @if ($errors->has('password_confirmation'))
                        <span class="help-block">
                            <strong>{{ $errors->first('password_confirmation') }}</strong>
                        </span>
                    @endif
                </div>
                    <button type="submit" id=""> Alterar Password </button>
                {{Form::close()}}

JS

<script>
    $(document).ready(function() {

        $('ajaxpasswordreset').on('submit', function(e) {
            e.preventDefault();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                method: 'POST',
                data: $('ajaxpasswordreset').serialize(),
                url: '/resetpassword', // This is the url we gave in the route
                success: function(response){
                    var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
                    new PNotify ({
                        title: "Sucesso",
                        text: "Password alterada com sucesso! ",
                        styling: "bootstrap3",
                        addclass: "stack-bottomright custom",
                        nonblock: {
                            nonblock: true
                        },
                        stack: stack_bar_bottom
                    });                  
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
                    new PNotify ({
                        title: "Erro",
                        text: "Algo correu mal, tenta novamente.",
                        styling: "bootstrap3",
                        addclass: "stack-bottomright custom",
                        nonblock: {
                            nonblock: true
                        },
                        stack: stack_bar_bottom
                    });                     
                }
            });
        });
    });
</script>

Answer 1

在head

中添加此内容

<meta name="_token" content="{{ csrf_token() }}" />

修改表格：

{!! Form::open(array('method'=>'post', 'id'=>'ajaxpasswordreset', 'class'=> 'profile_form','url'=>'/resetpassword')) !!}

    <label for="old_password"> Current Password </label>    
    <div class="form-group">
        {!! Form::password('old_password', ['class'=>'form-control']) !!}
        @if ($errors->has('old_password'))
            <span class="help-block">
            <strong>{{ $errors->first('old_password') }}</strong>
            </span>
        @endif
    </div>

    <div class="form-group">
        <label for="old_password"> New Password </label>    
        {!! Form::password('password', ['class'=>'form-control']) !!}
        @if ($errors->has('password'))
            <span class="help-block">
            <strong>{{ $errors->first('password') }}</strong>
            </span>
        @endif
    </div>

    <div class="form-group">
        <label for="old_password"> Password confirmation </label>    
        {!! Form::password('password_confirmation', ['class'=>'form-control']) !!}
        @if ($errors->has('password_confirmation'))
            <span class="help-block">
            <strong>{{ $errors->first('password_confirmation') }}</strong>
            </span>
        @endif
    </div>

    //** modify submit button
    {!! Form::submit('Alterar Password',['id'='submitBtn, 'class'=>'btn btn-success btn-sm form-control'])!!}

{!! Form::close() !!}

修改你的AJAX：

<script>
    $(document).ready(function() {
        $('#ajaxpasswordreset').on('submit',function(e){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            e.preventDefault();

            $.ajax({
                method: 'POST',
                data: $('#ajaxpasswordreset').serialize(),
                url: '/resetpassword', // This is the url we gave in the route
                success: function(response){
                    var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
                    new PNotify ({
                        title: "Sucesso",
                        text: "Password alterada com sucesso! ",
                        styling: "bootstrap3",
                        addclass: "stack-bottomright custom",
                        nonblock: {
                            nonblock: true
                        },
                        stack: stack_bar_bottom
                    });                  
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
                    new PNotify ({
                        title: "Erro",
                        text: "Algo correu mal, tenta novamente.",
                        styling: "bootstrap3",
                        addclass: "stack-bottomright custom",
                        nonblock: {
                            nonblock: true
                        },
                        stack: stack_bar_bottom
                    });                     
                }
            });
        });
    });
</script>

Answer 2

您唯一的问题是您的jQuery选择器已损坏，因此它不是以表单为目标。因此，当您点击提交时，正常的表单提交正在进行，您的Javascript未触发，并且您的浏览器最终会显示在表单的target页面上。这是你的选择者：

$('ajaxpasswordreset').on('submit', function(e) {

你错过了一个＆＃39;。＆＃39;识别班级名称。它应该是：

$('.ajaxpasswordreset').on('submit', function(e) {

我也注意到你以后遇到了同样的问题，序列化了表单数据：

data: $('ajaxpasswordreset').serialize(),

应该是：

data: $('.ajaxpasswordreset').serialize(),

Jquery AJAX POST总是以空白页结尾

2 个答案: