【问题标题】:Send Ajax data to Laravel controller将 Ajax 数据发送到 Laravel 控制器
【发布时间】:2017-03-11 23:29:33
【问题描述】:

我正在使用全日历,我需要在用户点击特定日期时创建一个新事件,我正在使用 Laravel 控制器来存储通过 ajax 请求发送的数据。我可以在日历上创建一个事件,但我无法将数据发送到控制器,而且浏览器选项卡在创建事件后冻结。任何人都可以纠正我错在哪里?或为问题提供更好的解决方案。

select: function(start, end, allDay) {
var title = event_name;// Event Title:
var eventData;
if (title) {
    eventData = { //creates a new event on the calendar 
        title: title,
        start: start,
        end: end,
        allDay: allDay
    };
    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true

    $.ajax({                        
        data:eventData,
        type: 'POST',
        url:"/projects/calendar/store", // your url
        beforeSend: function (request) {
            return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
        },
        success: function(response) {
             console.log(response);
        }
    });
}
$('#calendar').fullCalendar('unselect');
},

这是我的 Route 文件,我尝试了 get 和 post,但都没有工作。

Route::get('/projects/calendar/store','FrontEndController@calendarStore');

这是Controller,它只处理ajax请求发送的数据,不处理视图。

public function calendarStore(Request $request)   

{
$calendar = new Calendar;
Input::all();

$userId = Auth::user()->id;
$event_title =$request->input('title');
$start =$request->input('start');
$end =$request->input('end');

$calendar_event = Calendar::create([
    'user_id' => $userId, // I can get the user ID 
    'project_id' => 2,
    'event_title' => $event_title,
    'start_date' =>$start,
    'end_date' => $end
]);
}

【问题讨论】:

  • 首先您需要将您的路线更改为发布路线。在您的 ajax 对象中,您在发布数据时将类型设置为 POST,您必须对您的路线执行相同的操作。其次,您是否尝试过在 calendarStore 方法中检查您的网络选项卡和 dd($request)?如果不试试这个,看看你是否得到你的控制器方法。第三,向您的 ajax 对象添加一个错误键,该对象以相同的方式接受 success: function() { ... }error: function(response) { console.log('here', response); } 下的闭包,以查看您在发布时是否遇到错误。
  • 有什么错误?必须记录 AJAX 错误或 apache 日志错误。

标签: php jquery ajax laravel fullcalendar


【解决方案1】:

像这样替换您对 ajax data 参数的声明:

//creates a new event on the calendar 
eventData = {
    "title": title,
    "start": start,
    "end": end,
    "allDay": allDay
};

【讨论】:

  • 只有那些无效的标识符才需要引用属性。我不认为这是问题所在,肯定有其他问题。
【解决方案2】:

我进行了以下修改:它按预期工作,一旦用户在特定日期/日期单击/选择,它将询问标题并将事件保存在数据库中。

select: function(start, end, allDay) {
    var title = prompt('Are u sure you want to apply for job? Yes/No:');// Event Title:
    var start_time = moment(start).format();
    var end_time = moment(end).format(); //onclick get date 
    var eventData;
    if (title) {
        eventData = {
            title: title,
            start: start,
            end: end,
            allDay: allDay
        };
        $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true

        $.ajax({
            type: 'GET',//POST changed to GET
            url: "/projects/calendar/store", // your url                                                
            data: { //event data from global variable 
                title: event_name,
                start: start_time,
                end: end_time,
                event_id:event_id
            },
            beforeSend: function (request) {
                return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
            },
            success: function(response) {
                 console.log(response);
            }
        });
    }
    $('#calendar').fullCalendar('unselect');
},

更新路线

Route::get('/projects/calendar/store','FrontEndController@calendarStore');

更新的控制器

public function calendarStore(Request $request)
{
    $userId = Auth::user()->id;
    $event_title =$request->get('title');
    $start =$request->input('start');
    $end =$request->input('end');
    $project_id= $request->input('event_id');    


    $calendar_event = Calendar::create([
        'user_id' => $userId,
        'project_id' => $project_id,
        'event_title' => $event_title,
        'start_date' =>$start,
        'end_date' => $end
    ]);     
    return $calendar->all();
}

【讨论】:

    猜你喜欢
    • 2019-10-21
    • 2017-04-28
    • 2017-04-29
    • 1970-01-01
    • 2019-07-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-02
    相关资源
    最近更新 更多