wie JSON Array in Tabelle mit AJAX in JSP anzuzeigen

Question

Ich bin neu bei Ajax. Ich versuche, Daten in Tabelle in JSP-Datei anzuzeigen.

API wird mit AJAX aufgerufen.

-Controller übergeben unten Antwort:

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

In JSP-Seite:

<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> 

ich neue Zeile in der Tabelle sehen können, aber es gibt keine Daten. Ich will Name, emaild, mobileNo, usw. in bestimmtes Feld.

kann mir jemand sagen, wo ich falsch liege?

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) { 

          } 
         });