Table des matières
回复内容:
Maison développement back-end tutoriel 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>
Copier après la connexion
Copier après la connexion

这只是测试的 我需要在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>
Copier après la connexion
Copier après la connexion

这只是测试的 我需要在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>
Copier après la connexion

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

<code><?php $arr = array(22,44,5655);// 数据数组
$data = json_encode($arr);
?>
</code>
Copier après la connexion

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

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

        if(data){
            //将数据塞到你的相应的dom节点中就OK了
        }
    /});
</code>
Copier après la connexion
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Guide d'installation et de mise à niveau de PHP 8.4 pour Ubuntu et Debian Guide d'installation et de mise à niveau de PHP 8.4 pour Ubuntu et Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 apporte plusieurs nouvelles fonctionnalités, améliorations de sécurité et de performances avec une bonne quantité de dépréciations et de suppressions de fonctionnalités. Ce guide explique comment installer PHP 8.4 ou mettre à niveau vers PHP 8.4 sur Ubuntu, Debian ou leurs dérivés. Bien qu'il soit possible de compiler PHP à partir des sources, son installation à partir d'un référentiel APT comme expliqué ci-dessous est souvent plus rapide et plus sécurisée car ces référentiels fourniront les dernières corrections de bogues et mises à jour de sécurité à l'avenir.

CakePHP travaillant avec la base de données CakePHP travaillant avec la base de données Sep 10, 2024 pm 05:25 PM

Travailler avec la base de données dans CakePHP est très simple. Nous comprendrons les opérations CRUD (Créer, Lire, Mettre à jour, Supprimer) dans ce chapitre.

Date et heure de CakePHP Date et heure de CakePHP Sep 10, 2024 pm 05:27 PM

Pour travailler avec la date et l'heure dans cakephp4, nous allons utiliser la classe FrozenTime disponible.

Téléchargement de fichiers CakePHP Téléchargement de fichiers CakePHP Sep 10, 2024 pm 05:27 PM

Pour travailler sur le téléchargement de fichiers, nous allons utiliser l'assistant de formulaire. Voici un exemple de téléchargement de fichiers.

Routage CakePHP Routage CakePHP Sep 10, 2024 pm 05:25 PM

Dans ce chapitre, nous allons apprendre les sujets suivants liés au routage ?

Discuter de CakePHP Discuter de CakePHP Sep 10, 2024 pm 05:28 PM

CakePHP est un framework open source pour PHP. Il vise à faciliter grandement le développement, le déploiement et la maintenance d'applications. CakePHP est basé sur une architecture de type MVC à la fois puissante et facile à appréhender. Modèles, vues et contrôleurs gu

CakePHP créant des validateurs CakePHP créant des validateurs Sep 10, 2024 pm 05:26 PM

Le validateur peut être créé en ajoutant les deux lignes suivantes dans le contrôleur.

Comment configurer Visual Studio Code (VS Code) pour le développement PHP Comment configurer Visual Studio Code (VS Code) pour le développement PHP Dec 20, 2024 am 11:31 AM

Visual Studio Code, également connu sous le nom de VS Code, est un éditeur de code source gratuit – ou environnement de développement intégré (IDE) – disponible pour tous les principaux systèmes d'exploitation. Avec une large collection d'extensions pour de nombreux langages de programmation, VS Code peut être c

See all articles