根据选择提供内容

时间:2016-07-19 14:08:01

标签: jquery ajax laravel laravel-5 laravel-5.1

我有点困惑,因为我不确定我是否需要模型,因为我没有向数据库发布任何内容。我有一个简单的索引页

Route::get('/', 'IndexController@index');

这里没什么特别的。但在这个索引页面上,我有四个面板,采用以下形式

<a href="#" data-toggle="modal" data-target="#reportOneModal">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Report One</h3>
        </div>
        <div class="panel-body"><img src="{{ URL::to('/') }}/images/image1.png"></div>
    </div>
</a>

单击其中一个面板时,会弹出一个带有一些选择输入的模态。这是为了过滤掉我需要显示的报告。每个面板都有不同的选择输入选项。

我基本上需要做的是将选定的输入发布到我的控制器,以便我可以找出要显示的图像。模态看起来像这样

<div class="modal fade" id="reportOneModal" role="dialog" aria-labelledby="reportOneModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                {!! Form::open(array('route' => array('report'))) !!}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                {!! Form::label('productType', 'Report Type', array('class' => 'col-sm-5 control-label blue')) !!}
                                <div class="col-sm-7">
                                    <select class="selectpicker" name="reportType" id="reportType">
                                        <option value=""></option>
                                        <option value="Value">Value</option>
                                        <option value="Value">Salary</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="yearRow">
                        <div class="col-md-12">
                            <div class="form-group">
                                {!! Form::label('reportYear', 'Year', array('class' => 'col-sm-5 control-label blue')) !!}
                                <div class="col-sm-7">
                                    <select class="selectpicker" name="reportYear" id="reportYear">
                                        <option value=""></option>
                                        <option value="2016">2015</option>
                                        <option value="2016">2016</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    {!! Form::submit('View Report', ['class' => 'btn btn-primary loadBtn']) !!}
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

因此,您可以看到模态的表单是发布到报表,我将为每个面板调用不同的函数。这条路线看起来像这样

Route::post('report', array('as' => 'report', 'uses' => 'IndexController@getReport'));

控制器功能如下

public function getReport()
{
    $reportType =  Input::get('reportType');
    $reportYear =  Input::get('reportYear');

    $filePath = 'report-images/' . $reportType . '/' . $reportYear . '/';
    $image = $reportType . '_' . $reportYear;
    $fullPath = $filePath . $image . '.png';

    if(!empty($fullPath)) {
        return view('report.report', compact('fullPath'));
    }
}

我遇到的问题是指我想要显示的一份报告。我可以很好地显示图像,但此图像有许多不同的变体。所以在这个报告视图中我添加了

<select class="selectpicker" name="bmId" id="bmId">
    <option value="variant1">variant1</option>
    <option value="variant2">variant2</option>
    <option value="variant3">variant3</option>
</select>

当选择其中一个变体时,我需要以某种方式回忆路径report.getReport2。我认为我可以用ajax来做这件事,目前我正在尝试

$("#bmId").change(function() {
    $.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
    }});
});

问题是,我不想调用网址,我想调用该路由并将其传递给这个新的变体值。

我将如何做这样的事情?

由于

1 个答案:

答案 0 :(得分:1)

假设您的js代码在视图中自带。

$.ajax({
        type: "POST",
        url: "{{URL::to('/')}}/report",
        data: {bmId:$("#bmId").val()},
        dataType: 'json',
    success: function(data){
        //do something
    },
    error: function(data){
        var errors = data.responseJSON;  
        console.log(errors);
    }
});

data: {bmId:$("#bmId").val()},中,您可以传递所需数量的参数,例如

data: {bmId:$("#bmId").val(), reportType:$("#reportType").val() },

我认为你需要更新你的报告功能:

public function getReport(Request $request)//dont worry about it, it will auto inject it
{
    $reportType =  Input::get('reportType');
    $reportYear =  Input::get('reportYear');

    $filePath = 'report-images/' . $reportType . '/' . $reportYear . '/';
    $image = $reportType . '_' . $reportYear;
    $fullPath = $filePath . $image . '.png';

    if($request->ajax())//if response is ajx
        return response()->json(['status'=>'success']);

    if(!empty($fullPath)) {
        return view('report.report', compact('fullPath'));
    }
}