以html表格格式顯示json數據

嗨，我是編程新手。我想使用jQuery在HTML表格中顯示Json數據。以html表格格式顯示json數據

輸出來自服務器：

{"status":1,"insert":1,"data":[{"id":"1","name":"Jatin","email":"[email protected]","status":"1"},{"id":"2","name":"Shubham","email":"[email protected]","status":"1"},{"id":"3","name":"Aneh","email":"[email protected]","status":"1"},{"id":"52","name":"php","email":"[email protected]","status":"test"},{"id":"53","name":"faf","email":"as","status":"d"},{"id":"54","name":"taus","email":"alksd","status":"fdasd"},{"id":"55","name":"nake","email":"nakk","status":"naii"},{"id":"56","name":"test1","email":"tausf","status":"dfasd"},{"id":"57","name":"","email":"","status":""},{"id":"58","name":"shubu","email":"[email protected]","status":"12"},{"id":"59","name":"panku","email":"[email protected]","status":"3"},{"id":"60","name":"Jatin","email":"[email protected]","status":"123d"}]}

HTML代碼：

<table border="1" align="center"> 
    <tr> 
     <td> <input type="button" id="display" value="Display All Data" /> </td> 
    </tr> 
</table> 
<div id="responsecontainer" align="center"> 
</div>

的jQuery：

<script> 

     $(document).ready(function() { 

     $("#display").click(function() {     

      $.ajax({ //create an ajax request to load_page.php 
      url:'http://localhost/webservice/php_webservices/WebServices.php?method=select', 
      type: "POST",    
      dataType: "html", //expect html to be returned     
      success: function(response){      
       $("#responsecontainer").html(response); 
       //alert(response); 
      } 

     }); 
    }); 
    }); 
    </script>

來源

2016-06-28 Tausif Raut

嘗試一些處理響應，轉換爲javascript對象，執行數組中每個項目的循環，通過字符串操作創建所需的html tr-td，並且您很好。 – Dharmang

或結帳AngularJS（表格示例http://www.w3schools.com/angular/angular_tables.asp）。它可以讓你使用幾行代碼。 – Fredster

你可以看到一個簡單的結果，在這裏：

var json = '{"status":1,"insert":1,"data":[{"id":"1","name":"Jatin","email":"[email protected]","status":"1"},{"id":"2","name":"Shubham","email":"[email protected]","status":"1"},{"id":"3","name":"Aneh","email":"[email protected]","status":"1"},{"id":"52","name":"php","email":"[email protected]","status":"test"},{"id":"53","name":"faf","email":"as","status":"d"},{"id":"54","name":"taus","email":"alksd","status":"fdasd"},{"id":"55","name":"nake","email":"nakk","status":"naii"},{"id":"56","name":"test1","email":"tausf","status":"dfasd"},{"id":"57","name":"","email":"","status":""},{"id":"58","name":"shubu","email":"[email protected]","status":"12"},{"id":"59","name":"panku","email":"[email protected]","status":"3"},{"id":"60","name":"Jatin","email":"[email protected]","status":"123d"}]}' 
 
json = JSON.parse(json); 
 

 
var tb = $("#tab"); 
 

 
$.each(json.data,function(i,value){ 
 
    tb.append("<tr><td>ID: " + value.id + "</td><td>Name: " + value.name + "</td><td>Email: " + value.email + "</td><td>Status: " + value.status + "</td></tr>"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="tab"> 
 
    
 
<table>

但你可能要使用：

$.getJSON(url,function(data){ 
var tb = $("#tab"); 
    $.each(data.data,function(i,value){ 
    tb.append("<tr><td>ID: " + value.id + "</td><td>Name: " + value.name + " </td><td>Email: " + value.email + "</td><td>Status: " + value.status + "</td></tr>"); 
    }); 
});

來源

2016-06-28 07:00:29 Roxoradev

不錯的一個+10。享受:) –

我真的很感激它。謝謝:) – Roxoradev

鼓勵人們提供良好的代碼所需的欣賞。 –

嘗試下面的代碼，只需將此代碼放在你的Ajax的成功，並與你的迴應替換數據

var data = '{"status":1,"insert":1,"data":[{"id":"1","name":"Jatin","email":"[email protected]","status":"1"},{"id":"2","name":"Shubham","email":"[email protected]","status":"1"},{"id":"3","name":"Aneh","email":"[email protected]","status":"1"},{"id":"52","name":"php","email":"[email protected]","status":"test"},{"id":"53","name":"faf","email":"as","status":"d"},{"id":"54","name":"taus","email":"alksd","status":"fdasd"},{"id":"55","name":"nake","email":"nakk","status":"naii"},{"id":"56","name":"test1","email":"tausf","status":"dfasd"},{"id":"57","name":"","email":"","status":""},{"id":"58","name":"shubu","email":"[email protected]","status":"12"},{"id":"59","name":"panku","email":"[email protected]","status":"3"},{"id":"60","name":"Jatin","email":"[email protected]","status":"123d"}]}'; 
 
var obj = JSON.parse(data); 
 
var tableContent = "<table>"; 
 
tableContent += "<tr><th>ID</th><th>Name</th><th>Email</th><th>Status</th></tr>"; 
 
if(obj.data) { 
 
$.each(obj.data, function(key, value) { 
 
    tableContent += '<tr>'; 
 
    tableContent += '<td>'+value.id+'</td>'; 
 
    tableContent += '<td>'+value.name+'</td>'; 
 
    tableContent += '<td>'+value.email+'</td>'; 
 
    tableContent += '<td>'+value.status+'</td>'; 
 
    tableContent += '</tr>'; 
 
}); 
 
} 
 
tableContent += "</table>"; 
 
$("#responsecontainer").html(tableContent);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<table border="1" align="center"> 
 
    <tr> 
 
     <td> <input type="button" id="display" value="Display All Data" /> </td> 
 
    </tr> 
 
</table> 
 
<div id="responsecontainer" align="center"> 
 
</div>

來源

2016-06-28 07:03:54

不錯的一個。可能有點改進。 +10 –

我的另一個+1！這是一個很好的答案，但可以改進。 –

以html表格格式顯示json數據

回答

相關問題