首页 > 软件开发 > JavaScript >

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

来源:互联网 2023-03-16 23:56:44 版权归原作者所有,如有侵权,请联系我们

学习搭建网站的时候有些动态的数据需要传递到浏览器供js本地使用。k2E办公区 - 实用经验教程分享!

当数据较多时就可以批量操作。k2E办公区 - 实用经验教程分享!

k2E办公区 - 实用经验教程分享!

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

由服务器产生数据json数据和文件,以json文件为中介保存,js在浏览器端使用数据。k2E办公区 - 实用经验教程分享!

工具/原料

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

方法/步骤

  • 1

    完整的测试代码结构 测试出错可参考,后面分步说明k2E办公区 - 实用经验教程分享!

    k2E办公区 - 实用经验教程分享!

    需要把jQuery文件放在下面网页代码的同文件夹下。k2E办公区 - 实用经验教程分享!

    PHP 储存数据到 json文件 js获取数据并使用k2E办公区 - 实用经验教程分享!

  • 2

    创建两个php数组和一个php对象;k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    ?php //从数据库中已经获得的数据,特殊的数据可以加密 k2E办公区 - 实用经验教程分享!

    $v1 = "this is v1"; k2E办公区 - 实用经验教程分享!

    $v2 = "this is v2"; k2E办公区 - 实用经验教程分享!

    $v3 = 3; k2E办公区 - 实用经验教程分享!

    $arr=array("v1"=>$v1,"v2"=>$v2,"v3"=>$v3); k2E办公区 - 实用经验教程分享!

    $arr2=array("v3"=>$v1,"v1"=>$v2,"v2"=>$v3);k2E办公区 - 实用经验教程分享!

    class Oo{ k2E办公区 - 实用经验教程分享!

    public $a_arr; k2E办公区 - 实用经验教程分享!

    public $a_arr2;k2E办公区 - 实用经验教程分享!

    } k2E办公区 - 实用经验教程分享!

    $O =new Oo; //创建一个对象 k2E办公区 - 实用经验教程分享!

    $O->a_arr = $arr; k2E办公区 - 实用经验教程分享!

    $O->a_arr2 = $arr2;k2E办公区 - 实用经验教程分享!

    ?>k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    PHP 储存数据到 json文件 js获取数据并使用k2E办公区 - 实用经验教程分享!

  • 3

    查看创建的数组和对象,在编辑器中保存 在浏览器中查看k2E办公区 - 实用经验教程分享!

    第三个输出是把 前面三个合成一个大数组。k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    ?phpk2E办公区 - 实用经验教程分享!

    echo $v2."br>"; k2E办公区 - 实用经验教程分享!

    echo $arr['v1']."br>";//查看数据 k2E办公区 - 实用经验教程分享!

    echo json_encode($arr)."br>br>";//查看json数据格式 k2E办公区 - 实用经验教程分享!

    echo json_encode($O)."br>br>";//查看json数据格式 k2E办公区 - 实用经验教程分享!

    echo json_encode(array($arr,$arr2,$O))."br>br>";k2E办公区 - 实用经验教程分享!

    ?>k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    PHP 储存数据到 json文件 js获取数据并使用k2E办公区 - 实用经验教程分享!

  • 4

    将他们以一个大数组的形式 输出到json文件k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    ?phpk2E办公区 - 实用经验教程分享!

    $f = fopen("test-data.json","w") or die("fail to open"); k2E办公区 - 实用经验教程分享!

    fwrite($f,json_encode(array($arr,$arr2,$O))); k2E办公区 - 实用经验教程分享!

    fclose($f);k2E办公区 - 实用经验教程分享!

    ?>k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    PHP 储存数据到 json文件 js获取数据并使用k2E办公区 - 实用经验教程分享!

  • 5

    查看json中的数据k2E办公区 - 实用经验教程分享!

    k2E办公区 - 实用经验教程分享!

    ----以下数据内容-------k2E办公区 - 实用经验教程分享!

    k2E办公区 - 实用经验教程分享!

    [{"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}}]k2E办公区 - 实用经验教程分享!

    k2E办公区 - 实用经验教程分享!

    ----以上数据内容-------k2E办公区 - 实用经验教程分享!

    k2E办公区 - 实用经验教程分享!

    json语法是js的子集,从json文件中可以看到最后的数据是一个普通数组,数组中有三个对象,其中第三个对象是有前两个对象组合的对象。可见php的json_encode()将关联数组解析为对象(前两个关联数组)。将普通数组解析为数组(最后的组合)。k2E办公区 - 实用经验教程分享!

  • 6

    先看看JS的数组与对象k2E办公区 - 实用经验教程分享!

    这不需要 html文件,在body内k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    k2E办公区 - 实用经验教程分享!

    hr>k2E办公区 - 实用经验教程分享!

    使用json数据/ k2E办公区 - 实用经验教程分享!

    p id = "js-data"> k2E办公区 - 实用经验教程分享!

    /button onClick="show()">show/button>br>k2E办公区 - 实用经验教程分享!

    k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    在html中的js 尝试使用对象和数组k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    k2E办公区 - 实用经验教程分享!

    script > k2E办公区 - 实用经验教程分享!

    var jso = {"vl1":"1-1-1","vl2":2,"vl3":3};// 一个 js 对象 k2E办公区 - 实用经验教程分享!

    var jsa1 = new Array("a","b","c"); k2E办公区 - 实用经验教程分享!

    document.write("一个js的对象的使用:" jso.vl1 "br>"); k2E办公区 - 实用经验教程分享!

    document.write("一个js的数组的使用:" jsa1[0] "br>"); k2E办公区 - 实用经验教程分享!

    /script>k2E办公区 - 实用经验教程分享!

    k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    PHP 储存数据到 json文件 js获取数据并使用k2E办公区 - 实用经验教程分享!

  • 7

    加载jQuery 用jquery打开json文件,获取数据传给js变量D。在show()函数中使用json中的数据。k2E办公区 - 实用经验教程分享!

    在头部head标签内加载jQueryk2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    script src="jquery.js">/script>k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    在后面的js代码中读取和使用。k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    script >k2E办公区 - 实用经验教程分享!

    var D = null; k2E办公区 - 实用经验教程分享!

    $.getJSON("test-data.json",function(data){ k2E办公区 - 实用经验教程分享!

    D = data; k2E办公区 - 实用经验教程分享!

    }); k2E办公区 - 实用经验教程分享!

    k2E办公区 - 实用经验教程分享!

    function show(){//定义响应函数 k2E办公区 - 实用经验教程分享!

    document.getElementById("js-data").innerHTML = D[2].a_arr2.v1; k2E办公区 - 实用经验教程分享!

    } k2E办公区 - 实用经验教程分享!

    /script>k2E办公区 - 实用经验教程分享!

    --------------------------------------k2E办公区 - 实用经验教程分享!

    k2E办公区 - 实用经验教程分享!

    保存 然后点击show 就会出现使用的数据。k2E办公区 - 实用经验教程分享!

    PHP 储存数据到 json文件 js获取数据并使用k2E办公区 - 实用经验教程分享!

  • 8

    用的那个数据?k2E办公区 - 实用经验教程分享!

    数据使用的各个来源都在图中 好好看吧。k2E办公区 - 实用经验教程分享!

    PHP 储存数据到 json文件 js获取数据并使用k2E办公区 - 实用经验教程分享!

  • 8相关内容未经授权抓取自百度经验
  • 注意事项

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

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!k2E办公区 - 实用经验教程分享!


    标签: PHPJAVASCRIPTJQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号