PHP 储存数据到 json文件 js获取数据并使用

来源：互联网 2023-03-16 23:54:16 60

学习搭建网站的时候有些动态的数据需要传递到浏览器供js本地使用。

当数据较多时就可以批量操作。

本例程使用下面的简单模型

由服务器产生数据json数据和文件，以json文件为中介保存，js在浏览器端使用数据。

工具/原料

测试用的html编辑器这里用的DW
服务器Aapache
支持js的浏览器一枚
到jquery 官网获的Query库

方法/步骤

完整的测试代码结构测试出错可参考，后面分步说明

需要把jQuery文件放在下面网页代码的同文件夹下。

PHP 储存数据到 json文件 js获取数据并使用

创建两个php数组和一个php对象；

--------------------------------------

?php //从数据库中已经获得的数据,特殊的数据可以加密

$v1 = "this is v1";

$v2 = "this is v2";

$v3 = 3;

$arr=array("v1"=>$v1,"v2"=>$v2,"v3"=>$v3);

$arr2=array("v3"=>$v1,"v1"=>$v2,"v2"=>$v3);

class Oo{

public $a_arr;

public $a_arr2;

}

$O =new Oo; //创建一个对象

$O->a_arr = $arr;

$O->a_arr2 = $arr2;

--------------------------------------

PHP 储存数据到 json文件 js获取数据并使用

查看创建的数组和对象，在编辑器中保存在浏览器中查看

第三个输出是把前面三个合成一个大数组。

--------------------------------------

?php

echo $v2."br>";

echo $arr['v1']."br>";//查看数据

echo json_encode($arr)."br>br>";//查看json数据格式

echo json_encode($O)."br>br>";//查看json数据格式

echo json_encode(array($arr,$arr2,$O))."br>br>";

--------------------------------------

PHP 储存数据到 json文件 js获取数据并使用

将他们以一个大数组的形式输出到json文件

--------------------------------------

?php

$f = fopen("test-data.json","w") or die("fail to open");

fwrite($f,json_encode(array($arr,$arr2,$O)));

fclose($f);

--------------------------------------

PHP 储存数据到 json文件 js获取数据并使用

查看json中的数据

----以下数据内容-------

[{"v1":"this is v1","v2":"this is v2-\u54c8","v3":3},{"v3":"this is v1","v1":"this is v2-\u54c8","v2":3},{"a_arr":{"v1":"this is v1","v2":"this is v2-\u54c8","v3":3},"a_arr2":{"v3":"this is v1","v1":"this is v2-\u54c8","v2":3}}]

----以上数据内容-------

json语法是js的子集，从json文件中可以看到最后的数据是一个普通数组，数组中有三个对象，其中第三个对象是有前两个对象组合的对象。可见php的json_encode（）将关联数组解析为对象（前两个关联数组）。将普通数组解析为数组（最后的组合）。

先看看JS的数组与对象

这不需要 html文件，在body内

--------------------------------------

hr>

使用json数据/

p id = "js-data">

/button onClick="show()">show/button>br>

--------------------------------------

在html中的js 尝试使用对象和数组

--------------------------------------

script >

var jso = {"vl1":"1-1-1","vl2":2,"vl3":3};// 一个 js 对象

var jsa1 = new Array("a","b","c");

document.write("一个js的对象的使用：" jso.vl1 "br>");

document.write("一个js的数组的使用：" jsa1[0] "br>");

/script>

--------------------------------------

PHP 储存数据到 json文件 js获取数据并使用

加载jQuery 用jquery打开json文件，获取数据传给js变量D。在show（）函数中使用json中的数据。

在头部head标签内加载jQuery

--------------------------------------

script src="jquery.js">/script>

--------------------------------------

在后面的js代码中读取和使用。

--------------------------------------

script >

var D = null;

$.getJSON("test-data.json",function(data){

D = data;

});

function show(){//定义响应函数

document.getElementById("js-data").innerHTML = D[2].a_arr2.v1;

}

/script>

--------------------------------------

保存然后点击show 就会出现使用的数据。

PHP 储存数据到 json文件 js获取数据并使用

用的那个数据？

数据使用的各个来源都在图中好好看吧。

PHP 储存数据到 json文件 js获取数据并使用

8相关内容未经授权抓取自百度经验

注意事项

变量名和关联的键名不能出现中文，键值出现中文编码后会转码成Unicode码值；
json_encode()；的结果是字符串没有排版，如果需要人读或理解的话，可以去将其格式化，看上去会好看一点。。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： PHP JAVASCRIPT JQUERY

上一篇：如何利用Bootstrap UI制作自动补全输入框组件下一篇：如何利用Bootstrap UI单选按钮制作按钮组并取值

PHP 储存数据到 json文件 js获取数据并使用

工具/原料

方法/步骤

注意事项

热门文章

标签列表