duanjiao8007
duanjiao8007
采纳率100%
2017-11-25 22:29

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

I'm using two ajax call, on one page: At one side of the page I use ajax post to post data and submit color in a database(table name: color_store) and on the other side I try to get all the colors from that table and put it in a select tag by clicking to a button. But I keep receiving the old data even if I submit a new color.

Here is my color submit form:

    <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>

Here is my ajax to submit that color to the database:

$('#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 )
                    }
              })

Here is the select tag and button that shows data:

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

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

Here is the ajax call that gets all the colors:

    $.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));

                        });

                    });
                }
            })

And here is my controller that gets all the colors from database:

     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;
    }

So why am I getting the old values of JSON object, even after submitting the color into database? I don't really understand, isn't ajax suppose to give me the new data?

For example: When I load the page and press "Color update" button it shows me the two color that I submit before(red and green).But when I submit new color to the database, let's say yellow. after pressing the "Color update" button it shows me red and green again but no yellow on the list. isn't it suppose to show the new color in the list(red, green and yellow)?

Any help would be appreciated!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dr200166 dr200166 4年前

    Your color loading AJAX call seems not right. It should be as following:

      $("#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));
    
                            });
                  }
           });
      });
    

    And make sure whether the new color you added was successfully written to the database.

    Also, you could use the set interval function in order to check for the color updates in a given time interval. That would look like:

    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. 
    
    点赞 评论 复制链接分享

相关推荐