如何使用Ajax请求从控制器中获取数据以在表内循环

时间:2018-08-08 04:17:21

标签: jquery html ajax laravel twig

这是我的html

<form method="get" name="form">
    <select name="grade" data-url="{{ path_for('get.student') }}">
        <option value="">-- Choose Grade --</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
</form>
<div id="myData"></div>

我想显示基于我在ajax请求中选择的选项的记录,并将其放入表中。这是我获取请求的路线和控制器

$app->get('/', 'DataController:getStudent')->setName('get.student');

class DataController {
  public function getStudent($request, $response)
  {
    $grade = $request->getParam('grade');
    $student = Student::where('grade', $grade)->orderBy('name')->get();
    return $response->withJson([
        'result' => $student
    ]);
  }
}

这是我的剧本

<script>
    $(document).ready(function () {
        $('form select[name="grade"]').on('change', function () {
            var url  = $(this).data(url);


            $.ajax({
                url: url,
                type: 'get',
                data = { grade: form.grade.value },
                success: function (result) {
                    $('#myData').html(result);
                }
            });
        });
    });
</script>

我不知道这与ajax请求是否正确。我只想知道如何从控制器获取数据对象,并自己完成表内的循环。如果这是错误的,请改正我的方式。

1 个答案:

答案 0 :(得分:0)

您必须将JSON属性result作为HTML。

您必须创建诸如resources/views/students/grades.blade.php之类的Blade视图,在此视图中,您将渲染显示学生成绩的表格。

然后呈现此视图并通过JSON对象发送。

以下是它的伪代码:

public function getStudent($request, $response)
{
    $grade = $request->getParam('grade');
    $data['student'] = Student::where('grade', $grade)->orderBy('name')->get();

    $table = view('students.grades', $data)->render();

    return response()->json(['result' => $table]);
}