Question

我有一个PHP文件，它以JSON格式提供输出。代码如下 -

<?php
    include 'configure.php';
    $qr = "SELECT * FROM student_details";
    $res= mysql_query($qr);
    $i=0;
    while($row = mysql_fetch_array($res))
         {
         $stud_arr[$i]["full_name"] = $row["full_name"];
         $stud_arr[$i]["reg_no"] = $row["regno"];
         $stud_arr[$i]["address"] = $row["address"];
         $stud_arr[$i]["mark1"] = $row["mark1"];
         $stud_arr[$i]["mark2"]= $row["mark2"];
         $stud_arr[$i]["mark3"] = $row["mark3"];
    $i++;
     }
    header('Content-type: application/json'); 
    echo json_encode($stud_arr);
    ?>

这个文件在我的服务器上运行时，完美地给了我结果，即所有学生的详细信息和他们的标记在这里 -

[{"full_name":"Lohith","reg_no":"100","address":"street, lane","mark1":"90","mark2":"87","mark3":"88"},{"full_name":"Ranjeet","reg_no":"101","address":"dfkljg","mark1":"56","mark2":"45","mark3":"39"},{"full_name":"karthik","reg_no":"102","address":"askjldf","mark1":"85","mark2":"90","mark3":"100"}]

现在我尝试使用 -

在HTML文件上显示此内容

function getAllDetails()
{
var myTable = '' ;
myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>' ;
  myTable +=   "<tr><td><b>No</b></td><td><b>Full Name</b></td><td><b>Mark1</b></td><td><b>Mark2</b></td><td><b>Mark3</b></td></tr>";var url = "json-example2.php";
  $.getJSON(url, function(json) { $.each(json, function(v) {    
                myTable +=   "<tr><td>"+v.reg_no+"</td><td>"+v.full_name+"</td><td>"+v.mark1+
                "</td><td>"+v.mark2+
                "</td><td>"+v.mark3+
                "</td></tr>";   });

                $("#stud_tbl").html(myTable);});};

上面的代码显示了一个表，但在表的每个数据单元格中都显示为“undefined”。

    No  Full Name     Mark1           Mark2           Mark3
undefined   undefined   undefined   undefined   undefined
undefined   undefined   undefined   undefined   undefined
undefined   undefined   undefined   undefined   undefined

请帮忙解决此问题。

Answer 1

jQuery.each()的第一个参数是值的索引，第二个参数是值。

解决方案将$.each(json, function(v) {更改为$.each(json, function(i v) {

function getAllDetails() {
  var myTable = '';
    myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>';
    myTable += "<tr><td><b>No</b></td><td><b>Full Name</b></td><td><b>Mark1</b></td><td><b>Mark2</b></td><td><b>Mark3</b></td></tr>";
    var url = "data.json";
    $.getJSON(url, function(json) {
                $.each(json, function(i, v) {
                            myTable += "<tr><td>" + v.reg_no + "</td><td>"
                                    + v.full_name + "</td><td>" + v.mark1
                                    + "</td><td>" + v.mark2 + "</td><td>"
                                    + v.mark3 + "</td></tr>";
                        });

                $("#stud_tbl").html(myTable);
            });
};

演示：Plunker

Answer 2

$.each有两个参数，一个是index，另一个是value

      $.each(json, function(index, value) {
                        myTable += "<tr><td>" + value.reg_no + "</td><td>"
                                + value.full_name + "</td><td>" + value.mark1
                                + "</td><td>" + value.mark2 + "</td><td>"
                                + value.mark3 + "</td></tr>";
                    });

Answer 3

尝试以下方法。这是http://jsfiddle.net/H3cjC/3/

的演示

html是

<div class="tbl">
</div>

var data='[{"full_name":"Lohith","reg_no":"100","address":"street, lane","mark1":"90","mark2":"87","mark3":"88"},{"full_name":"Ranjeet","reg_no":"101","address":"dfkljg","mark1":"56","mark2":"45","mark3":"39"},{"full_name":"karthik","reg_no":"102","address":"askjldf","mark1":"85","mark2":"90","mark3":"100"}]'
data=$.parseJSON(data);
var myTable = '' ;
myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>' ;
  myTable +=   "<tr><td><b>No</b></td><td><b>Full Name</b></td><td><b>Mark1</b></td><td><b>Mark2</b></td><td><b>Mark3</b></td></tr>";var url = "json-example2.php";
 $.each(data, function(i,v) {    
   myTable +=   "<tr><td>"+data[i].reg_no+"</td><td>"+data[i].full_name+"</td>   <td>"+v.mark1+
                "</td><td>"+data[i].mark2+
                "</td><td>"+data[i].mark3+
                "</td></tr>";   
 });
$('.tbl').html(myTable);

Answer 4

您必须使用每个功能的第二个参数。

function getAllDetails()
    {
    var myTable = '' ;
    myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>' ;
    myTable +=   "<tr><td><b>No</b></td><td><b>Full Name</b></td><td><b>Mark1</b></td><td><b>Mark2</b></td><td><b>Mark3</b></td></tr>";
    var url = "SCRIPTNAME.php";
    $.getJSON(url, function(json) { $.each(json, function(v, x) {
        console.log("REG NR = "+x.reg_no);
        myTable +=   "<tr><td>"+x.reg_no+"</td><td>"+x.full_name+"</td><td>"+x.mark1+
            "</td><td>"+x.mark2+
            "</td><td>"+x.mark3+
            "</td></tr>";   });

        $("#stud_tbl").html(myTable);
    });
    }

JSON输出未显示

4 个答案: