如何使用JavaScript檢索PHP數據

Question

商業邏輯

用戶可以設置，更新和刪除可用於臨時工作的時間。 我為jQuery UI設置了multiDatePicker。 它允許用戶選擇多個日期。

目前如何運作

用戶可以選擇多個日期，他們的日期通過ajax發布到日歷控制器

問題

我可以很好地訪問回調函數中的日期，但是當我嘗試在回調函數之外檢索以前選擇的日期時，它似乎不起作用。 因此，我要努力做到的是以下幾點。

1. 用戶選擇幾個不同的日期，然后關閉日歷。 他們在以后的某個時間點回來，並且可以看到他們先前選擇的日期。

CalenderController

public function calendar(){
    $id = Auth::user()->id;
    $user_ids = DB::table('availability')->lists('user_id');
    $comma_separated = implode(",", $_POST['dates'] );


        if (empty($user_ids )){

            DB::table('availability')->insert(array('user_id' => $id, 'dates_available' => $comma_separated));
            return Response::json(array("dates" => $comma_separated));

        }else{

            foreach ($user_ids as $user_id){

                //if user id exit then add new dates
                if ($user_id == $id)  {


                    DB::statement("update availability set dates_available = concat(dates_available, ',{$comma_separated}') where user_id = '{$id}'");
                    return Response::json(array("dates" => $comma_separated));


                }
            }


        }



}

JS / AJAX

 var today = new Date();
    var y = today.getFullYear();
    var arr=[];
    $('#dashboard-availability-calender').multiDatesPicker({
        addDates: "how do i retrieve the dates from db ?",
        minDate: today,
        numberOfMonths: [1,1],
        showCurrentAtPos: today.getMonth(),
        onSelect: function(date) {

            var found = jQuery.inArray(date, arr);
            if (found >= 0) {
                // Element was found, remove it.
                arr.splice(found, 1);
            } else {
                // Element was not found, add it.
                arr.push(date);
            }
        }
    });

    $( ".mdp_button" ).click(function( event ) {
        event.preventDefault();

        console.log('user clicked');
        for ( var i = 0; i < arr.length; i = i + 1 ) {
            console.log("dates selectd " +  arr[ i ] );
        }

        if (arr.length === 0) {
            alert("No dates selected.");
        } else {

            var dates = jQuery("form#mdp_form").serialize() + "&" + $.param({ dates: arr }, false);

            $.ajax({
                url: '/user/dashboard',
                data: dates,
                type: 'POST',
                beforeSend: function() {
                    jQuery('.ui-datepicker-calendar').addClass('calenderDisabled');
                    $('.mdp_button').button('loading');
                },
                success: function(data) {
                    //I can retrieve my data like this data.dates 
                    setTimeout(function () {
                    jQuery('.sending').hide().remove();
                        jQuery('.mdp_button').addClass('btn-success').button('complete');
                        jQuery('.mdp_button').removeClass('btn-success').button('reset');
                        jQuery('.ui-datepicker-calendar').removeClass('calenderDisabled');
                        jQuery('#response').html('<div class="alert alert-success fade in"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Your dates have been saved successfully</div>');
                    }, 500)

                }

            });
        }
    });

Answer 1

嘗試這個：

$.ajax({
url: '/user/dashboard',
data: dates,
type: 'POST',
async: false,     <-----------------------------ADD THIS
beforeSend: function() {
    jQuery('.ui-datepicker-calendar').addClass('calenderDisabled');
    $('.mdp_button').button('loading');
}