在laravel中使用ajax更改状态

Posted 2023-03-14

【中文标题】在laravel中使用ajax更改状态

【英文标题】：Change status with ajax in laravel

【发布时间】：2020-02-24 16:19:54

【问题描述】：

我在我的项目中使用 Laravel。我有一张保持状态的凭证。 我已经使用 AJAX 来更改状态，并且 AJAX 代码可以成功运行。

但是，直到我刷新页面后，我的视图中的状态才发生变化。我正在寻找解决此问题的方法。

<button class="btn btn-link p-0 change" type="submit" data-id=" $voucher->id ">
  @if ($voucher->status == 1)
    <i class="fa fa-toggle-on text-success"></i>
  @else
    <i class="fa fa-toggle-off text-muted"></i>
  @endif
</button> 
@if ($voucher->status == 1)
  <span class="badge badge-soft-success">
    enable
  </span> 
@else
  <span class="badge badge-soft-pink">
    disbale
  </span> 
@endif

$(".change").click(function() 
  var id = $(this).data("id");
  $.ajax(
    url: "vouchers/change-status/" + id,
    type: 'put',
    dataType: "JSON",
    data: 
      "id": id,
      "_method": 'put',
      "_token": " csrf_token() ",
    ,
    success: function() 
      console.log("it Work");
      // $("tr#"+id).remove();
    
  );

  console.log("It failed");
);

【问题讨论】：

上传ajax方法我帮你...

我已经添加了，但是我的 ajax 没问题，它会改变状态

动态地改变你想要的状态...

是的，这正是启用和禁用文本

您没有明确说明 UI 需要如何更改，但您只需要执行 success 回调中的逻辑以根据需要修改 DOM

【参考方案1】：

你可以试试这个方法：

刀片

当状态为1 时，将您的代码包装在具有status-enabled 类的某个容器中。根据状态设置可见或不可见的元素的特殊类。

<div class="holder @if($voucher->status == 1) status-enabled @endif">
    <button class="btn btn-link p-0 change" type="submit" data-id=" $voucher->id ">
        <i class="fa fa-toggle-on text-success enabled-visible"></i>
        <i class="fa fa-toggle-off text-muted enabled-invisible"></i>
    </button>

    <span class="badge badge-soft-success enabled-visible">
        enable
    </span>

    <span class="badge badge-soft-pink enabled-invisible">
        disbale
    </span>
</div>

CSS

设置规则：

    .holder .enabled-visible 
        display: none;
    
    .holder .enabled-invisible 
        display: inline-block;
    

    .holder.status-enabled .enabled-visible 
        display: inline-block;
    
    .holder.status-enabled .enabled-invisible 
        display: none;
    

JS

当您成功更改状态时切换持有人类别。

$(".change").click(function() 
    var id = $(this).data("id");
    $.ajax(
        url: "vouchers/change-status/" + id,
        type: 'put',
        dataType: "JSON",
        data: 
            "id": id,
            "_method": 'put',
            "_token": " csrf_token() ",
        ,
        success: function() 
            $(this).closest('.holder').toggleClass('status-enabled');
        
    );

    console.log("It failed");
);

【参考方案2】：

就在你的成功功能中：

 success: function() 
      console.log("it Work");
      $("i.fa-toggle-on).hide();
      $("i.fa-toggle-off).show();
    

【讨论】：

它改变了我只想改变一行的所有文本

【参考方案3】：

html标签不需要if条件php刀片。

<button class="btn btn-link p-0 change" type="submit" data-id=" $voucher->id ">
    @if ($voucher->status == 1)
        <i class="fa fa-toggle-on text-success"></i>
    @else
        <i class="fa fa-toggle-off text-muted"></i>
    @endif
</button>
<div id="alert-message"></div>  // add this line
@endrole

将此代码更改为您的代码。 脚本文件

$(".change").click(function() 
        var id = $(this).data("id");

        var success = '<span class="badge badge-soft-success">' +
            'enable' +
            '</span>';

        var failed = '<span class="badge badge-soft-pink">' +
            'disbale' +
            '</span>';
        $.ajax(
            url: "vouchers/change-status/" + id,
            type: 'put',
            dataType: "JSON",
            data: 
                "id": id,
                "_method": 'put',
                "_token": " csrf_token() ",
            ,
            success: function() 
                console.log("it Work");
                $('#alert-message').html(success);
                // $("tr#"+id).remove();
            
        );

        $('#alert-message').html(failed);
    );