Добавление строк на основе полученного ответа JSon

Question

Я могу ввести более одного детали студента, как указано в приведенном ниже фрагменте кода, нажав на значок + рядом с каждой строкой и символом бен удалить, если не требуется:

<tr class="firstclass" id="school0"> 
    <td ><input type="text" id="rollnum" name="rollnum" class="rollClass" maxlength="20"/></td> 
    <td ><select id="school" name="school" multiple="multiple" style="width: 95px; size: 50px" size="3" class="schoolClass"></td> 
    <td><img src="<c:url value="/images/add_small.png"/>" id="btnAdd1" class="addImg"/></td> 
    <td><img src="images/delete_small.png" id="btnDelete1" class="delImg"/></td > 
</tr> 

<tr class="secondclass" id="college0"> 
    <td ><input type="text" id="rollnum" name="rollnum" class="rollClass" maxlength="20"/></td> 
    <td ><select id="college" name="college" multiple="multiple" style="width: 95px; size: 50px" size="3" class="schoolClass"></td> 
    <td><img src="<c:url value="/images/add_small.png"/>" id="btnAdd1" class="addImg"/></td> 
    <td><img src="images/delete_small.png" id="btnDelete1" class="delImg"/></td > 
</tr> 

Но сложной частью было показать их, если я получил более 1 строки данных как строку json.

$.ajax({ 
    dataType: "json", 
    type: "POST", 
    url: 'get_StudentList', 
    async: false, 
    data: { 
     schrollnum: schrollnum, 
     school: school, 
     colrollnum: collrollnum, 
     college: college 
    }, 
    success: function(response) { 
     // No clue if I had received around 10 rows of data 
    } 

Все было в JQuery

Answer 1

Вы можете сделать что-то вроде этого примера, и я хотел бы предложить вам, чтобы добавить точку останова внутри успеха вызова в хроме, чтобы проверить данные ответа, или вы можете использовать вкладку сети, чтобы увидеть ответ прежде чем писать код. Код зависит от структуры JSON ответа, поэтому проверьте сетевую вкладку в хром-инструментах разработчика, чтобы увидеть структуру JSON ответа.

$.ajax({ 
    dataType : "json", 
    type : "POST", 
    url : 'get_StudentList', 
    async : false, 
    data : { 
    schrollnum: schrollnum, 
    school: school, 
    colrollnum: collrollnum, 
    college: college 
    }, 
    success : function(response) { 
     //Open your website in chrome and a breakpoint at this line and then you can play with the response data in developer console 
     //If your response is in JSON format then you can directly check it like 
     if(response.students && response.students.length){ 
       //Insert elements to DOM from data received 
     } 
     //If your response is in String format then you will need to parse it 
     var studentData = JSON.parse(response); 
     if(studentData.students && studentData.students.length){ 
       //Insert elements to DOM from data received 
     } 
    } 
}); 

Answer 2

Вы можете перебирать свой ответ и добавить строки в таблицу:

success : function(response) { 
    var htmlTemplate = '', schoolId; 
    response.aaData.forEach(function(item){ 
     if (item.schrollnum){ 
      schoolId = item.schrollnum; 
     } else { 
      schoolId = item.colrollnum; 
     }    
     htmlTemplate += '<tr class="firstclass" id="' + schoolId + '"><td>...</td></tr>'; 
    }); 

    $('#table').append(htmlTemplate); 
}