提交表单后获取并显示json

时间:2014-12-08 12:45:19

标签: javascript jquery ajax php-5.4

我的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).'}';
}

我的Json

{
  "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中,但我不明白在哪里。

1 个答案:

答案 0 :(得分:0)

您需要在表单提交期间阻止默认操作。您可以使用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");
                    });
                });
                });
            });