怎么在javascript中得到后台数据?-php教程-PHP中文网

怎么在javascript中得到后台数据?

WBOY

发布： 2016-06-06 20:39:43

原创

1619 人浏览过

最近在研究在网页中嵌入hightchart的表格在嵌入时发现需要在javascript中得到后台的一组数据代码如下

<code><?php
require_once('include.php');
//得到所有水果
$sql = "select * from fruit";
function getallfruit($sql){
$rows = fetchAll($sql);
return $rows;
}

$rows=getallfruit($sql);
$n = getResultNum($sql);

?>
<html>
<head>
<title>查找</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="highcharts.js"></script>
</head>
<body>
<div>
<table>
<tr>
<td>id</td>
<td>名称</td>
<td>价格</td>
<td>销量</td>
<td>数量</td>
</tr>
<?php foreach ($rows as $row):?>
<tr>
<td><?php echo $row["id"]?></td>
<td><?php echo $row["name"]?></td>
<td><?php echo $row["price"]?></td>
<td><?php echo $row["salenum"]?></td>
<td><?php echo $row["num"]?></td>
</tr>
<?php endforeach;?>

</table>
<p>一共得到<?php echo $n ?>条数据</p>
</div>
<div id="container" style="min-width:800px;height:400px"></div>
</body>
<script type="text/javascript">
$(function () { 
$('#container').highcharts({ //图表展示容器，与div的id保持一致
chart: {
type: 'column' //指定图表的类型，默认是折线图（line）
},
title: {
text: '水果表' //指定图表标题
},
xAxis: { 
categories: ['价格','销量','数量' ]//指定x轴分组
},
yAxis: {
title: {
text: 'something' //指定y轴的标题
} 
},
series: [

{ //指定数据列
name: 'Point',//声明在当前函数中的数组对象
data: [1,2,3],
//数据
},
{ //指定数据列
name: 'Point1',//声明在当前函数中的数组对象
data: [1,3,5],
//数据
},
{ //指定数据列
name: 'Point2',//声明在当前函数中的数组对象
data: [2,4,6],
//数据
}

]
});
});
</script>
</html>
</code>

登录后复制

这只是测试的我需要在series中得到数据并且显示在网页上
下面是显示的样子

怎么在javascript中得到后台数据?

回复内容：

最近在研究在网页中嵌入hightchart的表格在嵌入时发现需要在javascript中得到后台的一组数据代码如下

<code><?php
require_once('include.php');
//得到所有水果
$sql = "select * from fruit";
function getallfruit($sql){
$rows = fetchAll($sql);
return $rows;
}

$rows=getallfruit($sql);
$n = getResultNum($sql);

?>
<html>
<head>
<title>查找</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="highcharts.js"></script>
</head>
<body>
<div>
<table>
<tr>
<td>id</td>
<td>名称</td>
<td>价格</td>
<td>销量</td>
<td>数量</td>
</tr>
<?php foreach ($rows as $row):?>
<tr>
<td><?php echo $row["id"]?></td>
<td><?php echo $row["name"]?></td>
<td><?php echo $row["price"]?></td>
<td><?php echo $row["salenum"]?></td>
<td><?php echo $row["num"]?></td>
</tr>
<?php endforeach;?>

</table>
<p>一共得到<?php echo $n ?>条数据</p>
</div>
<div id="container" style="min-width:800px;height:400px"></div>
</body>
<script type="text/javascript">
$(function () { 
$('#container').highcharts({ //图表展示容器，与div的id保持一致
chart: {
type: 'column' //指定图表的类型，默认是折线图（line）
},
title: {
text: '水果表' //指定图表标题
},
xAxis: { 
categories: ['价格','销量','数量' ]//指定x轴分组
},
yAxis: {
title: {
text: 'something' //指定y轴的标题
} 
},
series: [

{ //指定数据列
name: 'Point',//声明在当前函数中的数组对象
data: [1,2,3],
//数据
},
{ //指定数据列
name: 'Point1',//声明在当前函数中的数组对象
data: [1,3,5],
//数据
},
{ //指定数据列
name: 'Point2',//声明在当前函数中的数组对象
data: [2,4,6],
//数据
}

]
});
});
</script>
</html>
</code>

登录后复制

这只是测试的我需要在series中得到数据并且显示在网页上
下面是显示的样子

怎么在javascript中得到后台数据?

方案1：AJAX请求
方案2：如你上边的已经PHP读取了数据那把PHP数据变为JS对象/数组。

要么你的后台模板支持在 JavaScript 中内插表达式，要么就暴露一个 API 接口给 JavaScript 来做请求（AJAX），一般推荐后一种方法。接口按照 JavaScript 的要求把格式化的数据发送出去，发送的数据格式可以是 XML，当然 JSON 更好，很容易转换成 JavaScript 对象。

楼主贴的代码是php代码和html混合的，所以服务端的数据可以像html里的数据一样直接输出在script脚本了
script中的代码类似于这样

<code>var data = "<?php echo $data ?>";
</code>

登录后复制

之前php要预处理下数据类似这样

<code><?php
$arr = array(22,44,5655);// 数据数组
$data = json_encode($arr);
?>
</code>

登录后复制

一个异步接口去拉数据就可以了。

<code>$.get('/path/to/file', function(data) {

        if(data){
            //将数据塞到你的相应的dom节点中就OK了
        }
    /});
</code>

登录后复制