Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Json ответ в таблицу (https://javascript.ru/forum/jquery/44891-json-otvet-v-tablicu.html)

werty1001 05.02.2014 17:27

Json ответ в таблицу
 
Здравствуйте, знатоки помогите c такой задачей.

Есть таблица с 10 пользователями. По клику по кнопке навигации 1-2-3 и.т.д ajax отправляет id кнопки и сервер отдает в формате json данные страницы(page=id) 10 новых пользователей и их данные, которые и нужно поместить в таблицу.

Таблица
<table>
     <thead>
     <tr>
      <td>ID</td>
      <td>Контакты</td>
      <td>Логин</td>
     </tr>
     </thead>
     <tfoot>
      <tr>
      <td colspan="100%"> Навигация по страницам: 
        <a href="#" class="loadpeople" data-id="1">1</a>
        <a href="#" class="loadpeople" data-id="2">2</a>
        <a href="#" class="loadpeople" data-id="3">3</a>
      </td>
      </tr>
     </tfoot>
     <tbody id="peoplelist">
     <tr>
      <td>33</td>
      <td>234243@mail.ru</td>
      <td>werwerwer</td>
     </tr>
     <tr>
     ....
     </tr>
     </tbody>
    </table>


JSON ответ
{

"page=1":[          {
                          "id": "123",
                          "login": "wsdf1001",
                          "mail": "werty123@m11ail.ru"
                         },

                         {
                          "id": "124",
                          "login": "werty33333",
                          "mail": "werty13333@123mail.ru"
                         }


          ],

"page=2":[          {
                          "id": "2123",
                          "login": "wsdf1001",
                          "mail": "werdfs23@m11ail.ru"
                         },

                         {
                          "id": "2124",
                          "login": "wsdfty33333",
                          "mail": "wsdfy13333@123mail.ru"
                         }


          ]

}


AJAX
$('.loadpeople').click(function(){ 
      var id=$(this).data('id');

        $.ajax({
                    type: "POST",
		    url: "",
		    dataType: "json",
                    data: "page="+ id,
		    success: function(data, textStatus, xhr){$("#peoplelist").html("<tr><td>"+data.id+"</td><td>"+data.login+"</td><td>"+data.mail+"</td></td></tr>");}
		});
                return false;  
            });


Как правильно написать ajax запрос, чтобы в таблицу добавлялось столько строк сколько вернет сервер. Заранее спасибо за ответ.

werty1001 05.02.2014 23:59

$('.loadpeople').click(function(){ 
   var id=$(this).data('id');

    $.ajax({
    type: "POST",
    url: "",
    dataType: "json",
    data: "page="+id,
    success: function(data){
          var row = '';
          for (var i in data) {
               row += '<tr><td>'+data.id+'</td><td>'+data.login+'</td><td>'+data.mail+'</td></td></tr>';
                                   }
          $('#peoplelist').html(row);
                        }
     });
        return false;  
});


Написал так, но данные везде undefined, почему так? Это может быть из-за того, что запрос происходит к обычному .txt файлу?

рони 06.02.2014 00:04

werty1001,
:cray:
row += '<tr><td>'+data[i][0].id+'</td><td>'+data[i][0].login+'</td><td>'+data[i][0].mail+'</td></td></tr>';

werty1001 06.02.2014 00:28

рони,
Спасибо, совсем башка уже к ночи не варит :no:


Часовой пояс GMT +3, время: 14:47.