怎么在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中得到数据并且显示在网页上
下面是显示的样子
回复内容:
最近在研究在网页中嵌入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中得到数据并且显示在网页上
下面是显示的样子
方案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>

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











PHP 8.4는 상당한 양의 기능 중단 및 제거를 통해 몇 가지 새로운 기능, 보안 개선 및 성능 개선을 제공합니다. 이 가이드에서는 Ubuntu, Debian 또는 해당 파생 제품에서 PHP 8.4를 설치하거나 PHP 8.4로 업그레이드하는 방법을 설명합니다.

CakePHP에서 데이터베이스 작업은 매우 쉽습니다. 이번 장에서는 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 이해하겠습니다.

CakePHP는 PHP용 오픈 소스 프레임워크입니다. 이는 애플리케이션을 훨씬 쉽게 개발, 배포 및 유지 관리할 수 있도록 하기 위한 것입니다. CakePHP는 강력하고 이해하기 쉬운 MVC와 유사한 아키텍처를 기반으로 합니다. 모델, 뷰 및 컨트롤러 gu

CakePHP에 로그인하는 것은 매우 쉬운 작업입니다. 한 가지 기능만 사용하면 됩니다. cronjob과 같은 백그라운드 프로세스에 대해 오류, 예외, 사용자 활동, 사용자가 취한 조치를 기록할 수 있습니다. CakePHP에 데이터를 기록하는 것은 쉽습니다. log() 함수는 다음과 같습니다.

VS Code라고도 알려진 Visual Studio Code는 모든 주요 운영 체제에서 사용할 수 있는 무료 소스 코드 편집기 또는 통합 개발 환경(IDE)입니다. 다양한 프로그래밍 언어에 대한 대규모 확장 모음을 통해 VS Code는
