Question

我有一个带有更改密码功能的ajax表单。功能正常。当密码更改成功span元素时，我在页面中显示一个小通知。我希望在响应消息更改时显示不同的样式。它显示了成功和失败响应的相同样式。

var dataString = 'old_pass='  +old_pass+ '&new_pass='  +new_pass+ '&re_pass='  +re_pass; 

     $.ajax({

      type : "post",
      url : 'change_password',
      data : dataString,
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      cache : false,
      success : function(data){

         $('#password_notify').addClass('password-success').text(data.msg).fadeOut(2000);
         $('#change_pass_form').find('input:password').val('');

},
       error : function(data){
         alert(data.msg);
}

});

这是我的控制器代码

if（\ Hash :: check（$ pass_data [＆＃39; current_pass＆＃39;]，\ Auth :: user（） - ＆gt; password）） {

$user = new User();
    if($user->where('id',\Auth::user()->id)->update(['password'=>$pass_data['new_pass']])){
      return response()->json(['msg'=>'Password Changed']);
    }
     }

    else{
       return response()->json(['msg'=>'Wrong Password']);
        }

我想要做的是当回复邮件包含密码错误时。我想在ajax通知中添加一个不同的类，如果响应消息是密码已更改。我应该将password-success类添加到其中

Answer 1

平衡前端和后端的逻辑需要重复工作。相反，为什么不直接从后端返回一个视图，只需使用.replace()或嵌套它并使用.html()

$succes = $user->where('id',\Auth::user()->id)->update(['password'=>$pass_data['new_pass']]);
return response()->json([
    'html' => view()->make('auth.password.partials.response', [
        'success' => $success
    ])->
]);

然后你可以在auth/password/partials/response进行竞争。在其中，构建您的HTML：

<div id="password-nofify" class="{{ isset($success) ? 'password-success' : 'password-error' }}">
    @trans('auth.password.'. isset($success) ? 'success' : 'failure')
</div>

然后创建名为lang的{{1}}文件（如果该文件不存在）。然后添加一个多维数组，如下所示：

auth

最后，在您的//resources/lang/en/auth return [ 'password' => [ 'success' => 'Password Changed', 'failure' => 'Wrong Password ] ]回复中。只需替换元素：

JavaScript

Answer 2

您可以在ajax成功函数中检查data的值，然后根据该值添加不同的css类。

<style>
.password-success
{
    background-color:green
}
.password-error
{
    background-color:red
}
</style>

if(data.msg=="Password Changed")
{
    $('#password_notify').addClass('password-success').text(data.msg).fadeOut(2000);
}
else
{
    $('#password_notify').addClass('password-error').text(data.msg).fadeOut(2000);
}

Answer 3

像这样返回Success true / false：

if($user->where('id',\Auth::user()->id)->update(['password'=>$pass_data['new_pass']])){
  return response()->json(['success'=>true, 'msg'=>'Password Changed']);
}
 }

else{
   return response()->json(['success'=>false, 'msg'=>'Wrong Password']);
    }

然后使用data.success来决定使用哪个css类：

if(data.success == true){
   $('#password_notify').addClass('password-success').text(data.msg).fadeOut(2000);
}
else{
   $('#password_notify').addClass('password-failed').text(data.msg).fadeOut(2000);
}

或返回类的名称：

if($user->where('id',\Auth::user()->id)->update(['password'=>$pass_data['new_pass']])){
  return response()->json(['cssclass'=>'password-success', 'msg'=>'Password Changed']);
}
 }

else{
   return response()->json(['cssclass'=>'password-failed', 'msg'=>'Wrong Password']);
    }

并在一行中使用它：

$('#password_notify').addClass(data.cssclass).text(data.msg).fadeOut(2000);

如何根据ajax响应设置html元素的样式

3 个答案: