javascript - 在ajax调用后获取旧数据(get方法)Laravel 5.5

我在一页上使用了两个ajax调用：
在页面的一侧，我使用ajax post发布数据并在数据库（表名称：color_store）中提交颜色，另一方面，我尝试从该表中获取所有颜色，然后单击以将其放入选择标记中。一个按钮。
但是，即使我提交了新的颜色，我仍然会收到旧数据。

这是我的颜色提交表格：

    <form method="post" action="/CRM/defineColor" id="colorPickingForm">

        <input id="colorName"  name="colorName" type="text">
        <button type="button" class="btn blue" id="addColor">submit</button>

    </form>

这是我的ajax将该颜色提交到数据库：

$('#addColor').click(function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var  colorName = $('#colorName').val();

            $.ajax({
                url: "/CRM/defineColor",
                type:"POST",
                data:{ colorName: colorName},
                success: function( data ) {
                       $( "#result" ).empty().append( data )
                    }
              })

这是显示数据的选择标签和按钮：

   <select class="form-control" id="colorFetch">

   </select>
    <button type="button" class="btn red" id="colorRefresh">Color Update</button>

这是获取所有颜色的ajax调用：

    $.ajax({
                url: "/CRM/fetchColor",
                type:"get",
                dataType: "json",
                cache: false,
                contentType:"application/json; charset=utf-8",
                success: function( colorNameReq ) {


                    $("#colorRefresh").click(function(){

//loop through json object
                        $("#colorFetch").empty();
                        $.each( colorNameReq, function( key, value ) {


                            $('#colorFetch')
                                .append($("<option></option>")
                                    .attr({
                                        id:key,
                                        value:value
                                    })
                                    .text(value));

                        });

                    });
                }
            })

这是我的控制器，它从数据库中获取所有颜色：

     protected function fetchColor(){


        $colorInfo = new Color_store;
        $colorInfo = $colorInfo->get();
        $count = count($colorInfo);

        for($i = 0 ; $i < $count; $i++ ){
            $colorName[] = $colorInfo[$i]->colorName ;
        }

        $colorName=json_encode($colorName);

        return $colorName;
    }

那么，即使将颜色提交到数据库中后，为什么也要获取JSON对象的旧值？我不太了解，ajax是否应该给我新数据？

例如：
当我加载页面并按下“颜色更新”按钮时，它将显示我之前提交的两种颜色（红色和绿色）。但是当我向数据库提交新颜色时，我们说黄色。按下“颜色更新”按钮后，它再次显示红色和绿色，但列表上没有黄色。它不是应该在列表中显示新颜色（红色，绿色和黄色）吗？

任何帮助，将不胜感激！

最佳答案

您的加载颜色的AJAX调用似乎不正确。应如下所示：

  $("#colorRefresh").click(function(){
       $.ajax({
                url: "/CRM/fetchColor",
                type:"get",
                dataType: "json",
                cache: false,
                contentType:"application/json; charset=utf-8",
                success: function( colorNameReq ) {

                    //loop through json object
                        $("#colorFetch").empty();
                        $.each( colorNameReq, function( key, value ) {


                            $('#colorFetch')
                                .append($("<option></option>")
                                    .attr({
                                        id:key,
                                        value:value
                                    })
                                    .text(value));

                        });
              }
       });
  });

并确保您添加的新颜色是否已成功写入数据库。

另外，您可以使用设置间隔功能来检查给定时间间隔内的颜色更新。看起来像：

setInterval(function(){
 $.ajax({
                    url: "/CRM/fetchColor",
                    type:"get",
                    dataType: "json",
                    cache: false,
                    contentType:"application/json; charset=utf-8",
                    success: function( colorNameReq ) {

                        //loop through json object
                            $("#colorFetch").empty();
                            $.each( colorNameReq, function( key, value ) {


                                $('#colorFetch')
                                    .append($("<option></option>")
                                        .attr({
                                            id:key,
                                            value:value
                                        })
                                        .text(value));

                            });
                  }
           });
}, 2000); //This would check and update in every 2 seconds.