JSPでAJAXを使用してテーブルにJSON配列を表示する方法

Question

私はajaxを初めて使用しています。私はJSPファイル内のテーブルにデータを表示しようとしています。

APIはAJAXを使用して呼び出されます。

コントローラは応答の下方を通過：

BatchwiseStudent [name=Ram, course=MCA (Commerce), emailId=rammansawala@gmail.com, placed=null, batch=2016, mobileNo=7.276339096E9] 

JSPページで：私はテーブルに新しい行を見ることができるが、データがない

<script type="text/javascript"> 
     function getStudentDetails(){ 
      $batch = $('#batch'); 
      $course = $('#course'); 
      $.ajax({ 
       type: "GET", 
       url: "./batchAjax?batchId="+$batch.val()+"&courseId="+$course.val(), 


        success: function(data){ 
         console.log("SUCCESS ", data); 

         if(data!=null){ 
          $("#batchwiseTable").find("tr:gt(0)").remove(); 
          var batchwiseTable = $("#batchwiseTable"); 
          $.each(JSON.parse(data),function(key,value){ 
           console.log(key + ":" + value); 

           var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"); 
           rowNew.children().eq(0).text(value['name']); 
           rowNew.children().eq(2).text(value['emailId']); 
           rowNew.children().eq(3).text(value['placed']); 
           rowNew.children().eq(4).text(value['batch']); 
           rowNew.children().eq(5).text(value['mobileNo']); 
           rowNew.appendTo(batchwiseTable); 
          }); 
          $("#batchwiseTable").show(); 
         } 
        }, 
        error: function(e){ 
         console.log("ERROR ", e); 
        } 

      }); 

     } 
    </script> 

。私はname、emaild、mobileNoなどを特定の分野にしたい。

私は間違っている人は誰でも案内できますか？

Answer 1

Below code should be keep in the .jsp Page where you show table you don;t need to write html code for table jsp page. 

<div id="insert-table-here"></div> 



Javascript code: 

below code is for ajax call 
replace uri with your url value that is used in your url. 



    $.ajax({ 
          type: 'GET', 
          url: uri, 
          success: function (data) { 
           var str = '<table class="table table-bordered"><thead>'+ 
           '<tr><td>Name</td><td>Course</td><td>EmailId</td><td>Place</td><td>Batch</td><td>Mobile Number</td></tr></thead><tbody>'; 
           $.each(data, function (key, value) { 
            str = str + '<tr><td>' + 
              value.name + '</td><td>' + 
              value.course + '</td><td>' + 
              value.emailId + '</td><td>' + 
              value.placed + '</td><td>' + 
              value.batch + '</td><td>' + 
              value.mobileNo + '</td></tr>'; 

           }); 
           str = str + '</tbody></table>'; 
           $('#insert-table-here').html(str); 

          }, error: function (data) { 

          }, complete: function (data) { 

          } 
         });