javascript - 如何将对象从 View 传递到 Controller

Question

我有一个对象$Trial，该对象在 View 中会被填满。我想将它作为 POST 传递给路由，以使用它的数据调用函数。这是为了创建一个全日历事件。我很确定我已经在这件事上坐了太久了，我想得太多了。

想要通过 eventRender 回调来做到这一点，但不知道如何将数据传递给它，尝试了简单的 $.post 只是为了获取方法控制台中不允许或未知状态。

我现在有一些虚拟数据。

这里的目标是在标记的时间范围内创建事件。

如果我设法传递数据， Controller 函数将新记录添加到数据库

public function addEvent(Request $request)
{
    //dd($request);

    $event = new Event;
    $event->title = $request['title'];
    $event->start_date = $request['start_date'];
    $event->end_date = $request['end_date'];
    $event->save();

    \Session::flash('success','Event added successfully.');
    return redirect('/events');
}

web.php(路由)

Route::get('/events', 'EventController@index');
Route::post('/events', 'EventController@addEvent');

然后是我当前最常使用的索引函数来修改表(使其可编辑等)。

public $trial = [];

//
public function index()
{
    $events = [];
    $data = Event::all();
    if($data->count()) {
        foreach ($data as $key => $value) {
            $events[] = Calendar::event(
                $value->title,
                true,
                new \DateTime($value->start_date),
                new \DateTime($value->end_date.' +1 day'),
                null,
                // Add color and link on event
                [
                    'color' => '#f05050',
                    'url' => '/events',


                ]
            );
        }
    }

    $calendar = Calendar::addEvents($events) //add an array with addEvents
    //->addEvent($eloquentEvent, [ //set custom color fo this event
        //'color' => '#800',
    //])
        ->setOptions([ //set fullcalendar options
        'firstDay' => 1,
        'selectable' => true,
        'unselectAuto' => false,
        'selectOverlap' => false,
        'editable' => true,
        'businessHours' => [
            'dow' => [ 1, 2, 3, 4, 5 ],
            'start'=> '08:00',
            'end' => '19:00',
        ]

    ])->setCallbacks([ //set fullcalendar callback options (will not be JSON encoded)
        'eventClick' => 'function(event) {
            console.log("You clicked on an event with a title of: " + event.title);
     }',

        'select' => 'function(start, end) {
            console.log("Selection start: " + start.format() + " selection end: " + end.format());

            $trial = {
                title: "rent",
                start_date: start.format(),
                end_date: end.format()
            };
            console.log($trial);


        }',
    ]);

欢迎任何建议。

编辑:一般来说，我知道如何传递要在 Controller 中的函数中使用的数据的唯一方法是通过表单提交它

Answer 1

我没有专门使用 Angular，但它与 Vue 有很多相似之处。我使用一个名为 Axios 的平台无关包，它允许您向服务器发送请求。

回溯一下，表单基本上是发送 post 请求的通用方式。 url 在表单中指定，值是输入字段。

对于任何包，您都会执行类似的操作:

• 指定网址
• 指定请求类型(post、get 等)
• 传递参​​数(但不是必需的)

使用 Axios，它看起来像:

axios.post('/mySite.com/something', { datum1: 'value', datum2: true })
      .then(response => () {
         this.someFunction(response.data);
      });

这有一些 ES6 的魔力(箭头函数)，但这与许多请求非常相似。就像我说的，第二个参数是可选的，或者您甚至可以传递一个数据对象。

• 不要忘记还包括 csrf token 。如果您只是在页面头部添加元标记(请参阅 Laravel 文档)，这是最简单的，但您也可以直接将其作为 _csrf 参数传递。