如何根据ajax响应样式化html元素答案

【问题标题】：How to style html elements according to ajax response如何根据ajax响应样式化html元素
【发布时间】：2017-06-10 07:23:41
【问题描述】：

我有带有更改密码功能的 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['current_pass'],\Auth::user()->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 Changed。我应该给它添加password-success 类

【问题讨论】：

为了获得最佳实践，您应该从 Lrvl 控制器返回一个 Response 的实例。这样您就可以将HTTP Response code 与您的响应消息一起设置，这样您就可以通过map the response code（在此处转到statusCode）来确定您正在处理的状态。

标签： jquery html css ajax laravel

【解决方案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>

然后创建一个名为auth 的lang 文件（如果它不存在）。然后像这样添加一个多维数组：

//resources/lang/en/auth
return [
    'password' => [
        'success' => 'Password Changed',
        'failure' => 'Wrong Password
    ]
]

最后，在您的JavaScript 回复中。只需替换元素：

$('#password_notify').replace(data.html).fadeOut(2000);

【讨论】：

【解决方案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);
}

【讨论】：

是的，我可以做到。有没有其他合适的方法可以做到这一点，或者这是唯一的方法？
可能还有其他方式，不过这个最简单

【解决方案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);

【讨论】：