以html表格式显示json数据

Hey guy's I am new in programming. and i want to display Json data in HTML table using jquery.

嘿伙计我是编程新手。我想使用jquery在HTML表格中显示Json数据。

Output came from server:

输出来自服务器:

{"status":1,"insert":1,"data":[{"id":"1","name":"Jatin","email":"jatin@122.d","status":"1"},{"id":"2","name":"Shubham","email":"jatin@122.d","status":"1"},{"id":"3","name":"Aneh","email":"jatin@122.d","status":"1"},{"id":"52","name":"php","email":"rauttausif38@gmail.com","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":"shubu@122.d","status":"12"},{"id":"59","name":"panku","email":"jatin@122.d","status":"3"},{"id":"60","name":"Jatin","email":"jatin@122.d","status":"123d"}]}

HTML Code:

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

2 个解决方案

#1

You can see a simple result here:

你可以在这里看到一个简单的结果:

var json = '{"status":1,"insert":1,"data":[{"id":"1","name":"Jatin","email":"jatin@122.d","status":"1"},{"id":"2","name":"Shubham","email":"jatin@122.d","status":"1"},{"id":"3","name":"Aneh","email":"jatin@122.d","status":"1"},{"id":"52","name":"php","email":"rauttausif38@gmail.com","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":"shubu@122.d","status":"12"},{"id":"59","name":"panku","email":"jatin@122.d","status":"3"},{"id":"60","name":"Jatin","email":"jatin@122.d","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>

But you may want to use:

但您可能想要使用:

$.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>");
  });
});

#2

Try following code, just place this code in your ajax success and replace data with your response

尝试以下代码,只需将此代码放入ajax成功并将数据替换为您的响应

var data = '{"status":1,"insert":1,"data":[{"id":"1","name":"Jatin","email":"jatin@122.d","status":"1"},{"id":"2","name":"Shubham","email":"jatin@122.d","status":"1"},{"id":"3","name":"Aneh","email":"jatin@122.d","status":"1"},{"id":"52","name":"php","email":"rauttausif38@gmail.com","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":"shubu@122.d","status":"12"},{"id":"59","name":"panku","email":"jatin@122.d","status":"3"},{"id":"60","name":"Jatin","email":"jatin@122.d","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>

#1