如何使用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');
}