目錄
回复内容:
首頁 後端開發 php教程 怎么在javascript中得到后台数据?

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

Jun 06, 2016 pm 08:39 PM
highcharts javascript php

最近在研究在网页中嵌入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);

?>


<title>查找</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="highcharts.js"></script>


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

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

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

?>


<title>查找</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="highcharts.js"></script>


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

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

</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>
登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 Dec 24, 2024 pm 04:42 PM

適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南

CakePHP 專案配置 CakePHP 專案配置 Sep 10, 2024 pm 05:25 PM

CakePHP 專案配置

CakePHP 日期和時間 CakePHP 日期和時間 Sep 10, 2024 pm 05:27 PM

CakePHP 日期和時間

CakePHP 檔案上傳 CakePHP 檔案上傳 Sep 10, 2024 pm 05:27 PM

CakePHP 檔案上傳

CakePHP 路由 CakePHP 路由 Sep 10, 2024 pm 05:25 PM

CakePHP 路由

討論 CakePHP 討論 CakePHP Sep 10, 2024 pm 05:28 PM

討論 CakePHP

如何設定 Visual Studio Code (VS Code) 進行 PHP 開發 如何設定 Visual Studio Code (VS Code) 進行 PHP 開發 Dec 20, 2024 am 11:31 AM

如何設定 Visual Studio Code (VS Code) 進行 PHP 開發

CakePHP 快速指南 CakePHP 快速指南 Sep 10, 2024 pm 05:27 PM

CakePHP 快速指南

See all articles