如何使用php url返回的JSON对象填充Table?

时间:2015-02-12 14:09:05

标签: javascript php json

从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 );

由上面的鳕鱼生成的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脚本 请检查提醒(数据),只有一个数据存入数据库这样只打印一次但打印多次,我认为问题在这里

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

1 个答案:

答案 0 :(得分:-1)

我不确定但是尝试$ .getJSON()而不是$ .get()