如何使用由 php url 返回的 JSON 对象填充表？

Question

我们从 php 服务器获取 json 数据，现在我们必须在单击刷新按钮后用 json 数据填充表。数据即将到来，但它每列都未定义，并且重复了很多次，请帮我解决这个问题。

生成json数据的myphp代码

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
mysql_connect("localhost","root","2121");
mysql_select_db("service");

$query="Select * from customer where services='2'";
$result=mysql_query($query);

if ( $result === false ) {
  die("Can\'t do that: " . mysql_error());
}

$retVal = array();
//MYSQL_ASSOC remove key =field identifier
while( $row = mysql_fetch_array( $result, MYSQL_ASSOC ) ) {
  $retVal[] = $row;
}
echo json_encode( $retVal );

上述cod生成的json数据格式e

[
    {
        "cId": "65",
        "address1": "PWD Road, B Narayanapura, Bengaluru, Karnataka, India",
        "address2": "JSS Layout, Mysore, Karnataka, India",
        "city": "Bangalore",
        "comments": "ds",
        "email": "you@gmail.com",
        "landMark": "PWD Road, B Narayanapura, Bengaluru, Karnataka, India",
        "scheduledDate": "13-Feb-2015",
        "scheduledTime": "10:30 AM",
        "services": "2",
        "userContactNumber": "1220000000",
        "userName": "Gajendra"
    }
]

Java 脚本 请检查alert(data)，数据库中只有一个数据，所以它应该只打印一次，但打印不止一次，我认为问题就在这里

    <script>
                 function fetchData1(){                          
                    $(".data-contacts1-js tbody").empty();
                    $.get("http://localhost/service/newJobs.php", function(data) 

                       for(var i in data){
                         alert(data);
                         var tr=$("<tr></tr>");
                         tr.append(
                                "<td>" + data[i].ID + "</td>" +
                                "<td>" + data[i].userName + "</td>" +
                                "<td>" + data[i].cust_name + "</td>" +
                                "<td>" + data[i].userContactNumber + "</td>" +                           
                                "<td>" + data[i].email + "</td>" +
                                "<td>" + data[i].address1 + "</td>" +
                                "<td>" + data[i].scheduledDate + "</td>" +
                                "<td>" + data[i].scheduledTime + "</td>");
                         $(".data-contacts1-js tbody").append(tr);
                         i++;
                       }
                    });
                }  

                 $(document).ready(function(){
                      $(".data-contacts1-js tbody").empty();
                    $('#fetchContacts1').click(function() {
                         fetchData1();
                    });
                });
            </script>

myhtml 表格代码

<div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">Carpenter Services</div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                     <table class="data-contacts1-js table table-striped" >
                                          <thead>
                                            <tr>
                                                  <th>ID</th>
                                                  <th>Customer Name</th>
                                                  <th>Customer Mobile</th>
                                                  <th>Customer Email</th>
                                                  <th>Address</th>
                                                  <th>Date</th>
                                                  <th>Time</th>
                                                  <th>Status</th>
                                            </tr>
                                          </thead>
                                      <tbody>

                                      </tbody>
                                    </table>                                    
                                </div>
                                <button id="fetchContacts1" class="btn btn-default" type="submit">Refresh</button>                          
                            </div>
                        </div>
                        <!-- /block -->
                    </div>

Answer 1

我不确定，但请尝试使用 $.getJSON() 而不是 $.get()