jquery AJAX POST总是结束在一个空白页

Question

我想提交一个表单，而不刷新它，使用jquery和ajax，我也使用laravel。

url重定向到更新表单中数据的路径。

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) { 

你错过了'。'以确定类名。它应该是：

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

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

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

应该是：

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