在jQuery中使用ajax捕獲json響應而不刷新

Question

我錯過了一些東西......但我不知道是什麼。我想使用jquery和laravel 5.4來發出ajax請求。在Java腳本我有

function changeUserPassword(){ 

    var current_pasword = $('input[name="current_password"]').val(); 
    var new_password = $('input[name="new_password"]').val(); 
    var confirm_password = $('input[name="confirm_password"]').val(); 

    if(new_password === confirm_password){ 

     $.ajax({ 
      url: $('#changePsw_form').attr('action'), 
      type: 'POST', 
      data: {current_pasword: current_pasword, new_password:new_password, confirm_password: confirm_password}, 
      success: function(response){ 
       var resp = JSON.parse(response); 
       alert(resp.message); 
      }, 
      error: function(response){ 
       var resp = JSON.parse(response);    
       alert(resp.message); 
      } 
     }); 
    } 
    else{ 
     alert('Password don`t match!'); 
    } 
} 

$('#savePsw').on('submit', function(e){ 
    e.preventDefault(); 
    changeUserPassword(); 
}); 

我的HTML表單

<div class="row" id="changePsw"> 
    <form method="post" class="form-horizontal" id="changePsw_form" action="{{ route('changepassword') }}"> 
     <div class="form-group col-md-12 has-feedback"> 
      <label class="control-label col-md-4 col-md-pull-1" for="password">Current Password: 
      </label> 
      <div class="col-md-6 col-sm-12"> 
       <input type="password" class="form-control" id="password" name="current_password"> 
       <span class="glyphicon form-control-feedback" id="password_icon"></span> 
      </div> 
     </div> 
     <div class="form-group col-md-12 has-feedback"> 
      <label class="control-label col-md-4 col-md-pull-1" for="new_password">New Password: 
      </label> 
      <div class="col-md-6 col-sm-12"> 
       <input type="password" class="form-control" id="new_password" name="new_password"> 
       <span class="glyphicon form-control-feedback" id="new_password_icon"></span> 
      </div> 
     </div> 
     <div class="form-group col-md-12 has-feedback"> 
      <label class="control-label col-md-4 col-md-pull-1" for="confirm_password">Confirm password: 
      </label> 
      <div class="col-md-6 col-sm-12"> 
       <input type="password" class="form-control" id="confirm_password" name="confirm_password"> 
       <span class="glyphicon form-control-feedback" id="confirm_password_icon"></span> 
      </div> 
     </div> 
     <button class="btn btn-success" id="savePsw">Save</button> 
     {{ csrf_field() }} 
    </form> 
</div> 

在我的劇本我會嘗試檢查，如果密碼匹配，但並非如此。它直接進入帖子的網址，並獲得瀏覽器（平原JSON）從服務器（laravel控制器）響應

return response()->json(['success' => false, 'message' => 'Password don`t match!']); 

{"success":false,"message":"Password don`t match!"} 

失敗的原因，如果：

if(new_password === confirm_password) 

如何檢查（客戶端），如果密碼比賽？ （然後做ajax）如何捕捉響應並顯示警報？ （在瀏覽器中不是普通的json）沒有刷新？

Answer 1

您需要指定響應的dataType。

$.ajax({ 
dataType: 'json', 
... 

此外，它弄清楚發生了什麼事情在你的成功方法，使用的console.log好辦法：

success: function(response){ 
if(response.success == true){ 
    //Write code here is success 
    console.log("success code here"); 
} 
else{ 
    console.log(response.message); 
} 
} 

編輯

添加的onclick到按鈕：

onclick="submit" 

和：

onsubmit="changeUserPassword()" 

給FORM作品！

JS的應該是：

function changeUserPassword(){ 

    var current_pasword = $('input[name="current_password"]').val(); 
    var new_password = $('input[name="new_password"]').val(); 
    var confirm_password = $('input[name="confirm_password"]').val(); 

    if($('#changePsw_form').valid()){ 
     if(new_password === confirm_password){ 
      event.preventDefault(); 
      $.ajax({ 
       url: $('#changePsw_form').attr('action'), 
       type: 'POST', 
       data: {current_pasword: current_pasword, new_password:new_password, confirm_password: confirm_password}, 
       dataType: 'JSON', 
       success: function(response){ 
        if(response.success){ 
         swal('Success!', response.message, 'success'); 
        } 
        else{ 
         swal('Failed!', response.message, 'error'); 
        } 
       } 
      }); 
     } 
     else{ 
      event.preventDefault(); 
      swal('Password Mismatch!', "Please try again!", "warning"); 
     } 
    } 
}