提交表单后获取并显示 json

Question

我的 json 有问题。我希望当我提交表单以获取 json 并放入表格时，但现在当我提交表单时，我被重定向到一个空白页面。 我的表格：

 {{ Form::open(array('url'=>'/register/showMarks','method' => 'post','id'=>'mark-form')) }}
 <p>
 {{ Form::label('Code:') }}
 {{ Form::text('idno',null,array('class'=>'form-control')) }}
 </p>
 {{ Form::submit('Send',array('class'=>'btn btn-primary')) }}
 {{ Form::close() }}

我的控制器：

public function getMarks(){
    $idno = Input::get('idno');
    $aMarks = DB::table('students')
        ->join('marks','marks.student_id', '=', 'students.id')
        ->join('objects','marks.object_id', '=', 'objects.id')
        ->where('students.idno', '=', $idno)
        ->select('marks.note',
                'objects.name')
        ->get();
    echo '{"marks":'.json_encode($aMarks).'}';
}

我的杰森

{
  "marks": [
    {
      "note": "6",
      "name": "Name 1"
    },
    {
      "note": "9",
      "name": "Name 2"
  },]
}

我的 jquery ：

<table class="mGrid" id="jsondata">
     <thead>
        <th>Object</th>
     </thead>
     <tbody></tbody>
</table>
<script type="text/javascript">
   $(document).ready(function(){
      $('#mark-form').submit(function(e){
         var url='/register/showMarks';
         $("#jsondata tbody").html("");
         $.getJSON(url,function(data){
           $.each(data.marks, function(i,mark){
              var newRow =
                  "<tr>"
                     +"<td>"+mark.name+"</td>"
                  +"</tr>" ;
              $(newRow).appendTo("#jsondata tbody");
           });
        });
     });
  });
 </script>

我是后端开发人员，我认为错误出在这个 jquery 中，但我不明白在哪里。

Answer 1

您需要在表单提交期间阻止默认操作。您可以使用 e.preventDefault 方法来做到这一点。

更多信息：https://developer.mozilla.org/en/docs/Web/API/event.preventDefault

检查是否有效：

  $(document).ready(function(){
                $('#mark-form').submit(function(e)
                e.preventDefault();
                   {
                    var url='/register/showMarks';
                        $("#jsondata tbody").html("");
                            $.getJSON(url,function(data){

                            $.each(data.marks, function(i,mark){
                    var newRow =
                        "<tr>"
                            +"<td>"+mark.name+"</td>"
                        +"</tr>" ;
                    $(newRow).appendTo("#jsondata tbody");
                    });
                });
                });
            });