Question

我有一个php代码，如下所示 serverdata.php

<?php

require_once('database.php');
header("Content-type: application/json");  

$sql = "SELECT * FROM user";
$result = mysql_query($sql);
$uid = array();
$uname = array();


while($row = mysql_fetch_assoc($result)) 
   {
     $dataarray[] = $row;
   }

  echo json_encode($dataarray); 
?>

以JSON格式生成以下输出：

[{"id":"1","username":"Sagun","password":"61b51ae250c7e7505191e4d5e6240c04"},{"id":"2","username":"roshan","password":"d6dfb33a2052663df81c35e5496b3b1b"},{"id":"17","username":"rajiv","password":"9a9af43c15771eaf3b2db8bb28a2829d"}]

我想要的是从上面的json格式的php文件中获取数据，并使用AJAX将其显示在另一个页面的表中。请引导我完成它。

 ID USERNAME PASSOWRD 
  1   sagun   61b51...    
  2   roshan  d6dfb.. 
 17   rajiv   9a9af..

Answer 1

这是从php输出中获取json数据的ajax函数，尝试根据需要进行修改。

<script type="text/javascript">
$(function() {
    $.ajax({
        type      : 'POST',
        url       : 'YOUR_PHP_URL',
        data      : {},
        dataType  : 'json',
        error     : function (a, b, c) 
        {

        },
        success   : function(data) 
        {
            console.log( data );
        }
    });
});
</script>

不要忘记包含jQuery库。 https://developers.google.com/speed/libraries/#jquery

Answer 2

此jquery

中构建表的代码

<script type="text/javascript">
function jsonData()
{

    $.ajax({
        type:'post',
        url:"serverdata.php",
        datatype:'json',
        success:function(data)
        {
            var jdata=$.parseJSON(data);
            ///console.log(jdata);
            $(function(){
                $.each(jdata,function(i,item){
                    var tr = $('<tr>').append(
                    $('<td>').text(item.id),
                    $('<td>').text(item.name),
                    $('<td>').text(item.email),
                    //$('<td>').text(item.password),
                    $('<td>').text(item.mob_num),

                );
                $("#tableId tbody").append(tr); 
                //console.log(tr.wrap('<p>').html());
                })
            })

        }
    })
}

Answer 3

<强> database.php中

    <?php
try{
    $db = new PDO('mysql:host=localhost;dbname=testing', "root" , "");


}catch(PDOException $e){
    print "error in connection" . $e->getMessage();
}

<强> home.html的

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSON data</title>
</head>
<body>

  <table id="demoTable">
    <thead>
      <tr>
        <td ><label>Id</label></td>
        <td ><label>Username</label></td>
        <td ><label>Password</label></td>
      </tr>
    </thead> 
    <tbody>  
    </tbody>  
  </table>
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="detail.js" type="text/javascript"></script>
</body>
</html>

<强> details.js

$(document).ready(function() {

    $.ajax({
        url:'serverdata.php',
        type:'POST',
        success:function(data){

            var result = $.parseJSON(data);
            $.each(result, function(key, value){
                $.each(value, function(k, v){
                    if(k === "id"){
                        $("#demoTable >tbody:last").append(
                            $('<tr>').append(
                                $('<td>').append(v)
                                .append(
                                    $('</td>').append(
                                        $('</tr>')
                                        )
                                    )
                                )
                            );
                    }
                    if(k === "username"){
                        $("#demoTable >tbody >tr:last").append(

                            $('<td>').append(v)
                            .append(
                                $('</td>')

                                )

                            );
                    }
                    if(k === "password"){
                        $("#demoTable >tbody >tr:last").append(

                            $('<td>').append(v)
                            .append(
                                $('</td>')

                                )

                            );
                    }
                });
            });
        }
    })      
});

<强> serverdata.php

<?php
require_once 'database.php';
$data = array();
$stmt = $db->query('SELECT * FROM user');
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($row as $key => $value) {
    $data[$key] = $value;
    $result = json_encode($data);
}
echo $result;

使用ajax在表中显示JSON数据（来自php文件）

3 个答案: