搜尋
首頁後端開發php教程php和js如何通过json互相传递数据相关问题探讨_PHP

JSON

当我们在结合php和javascript实现某些功能时,经常会用到json。json是js的一种数据格式,可以直接被js解析。而php无法直接读取json数据,但是php提供了json_decode函数来对json数据进行转化,从而可以被php脚本访问。同时,php也提供了json_encode函数来将数据转化成json格式。那么,js中的原生json与php中通过json_encode函数转化后的json是否完全一样呢?今天,站长就和大家一起来探讨这个问题。

我们通过php向javascript传递数组数据时,通常要将其转化为json格式,一遍javascript来获取,那么我们就以数组为例,先来看一下两者之间的区别。

1、一维数组
考虑php数组
复制代码 代码如下:
$array=array("1","2","3");

使用json_encode函数转化后,对应的json字符串为
复制代码 代码如下:
["1","2","3"]。

细心的朋友很快就发现,转化后得到的json字符串,就是javascript中的数组形式,那么是否可以用js的数组访问方式来访问呢?
当然是可以的,但是你将这个json字符串传递给给js时,需要使用urlencode函数对其编码,如:
复制代码 代码如下:
访问json

我们可以用下面的js代码来验证:
复制代码 代码如下:
function show(str){
var jobj=eval_r(decodeURI(str));
alert(jobj[2]);
}

大家自己试一试就会发现,是的,可以用js中访问一维数组的方式来访问它。eval方法将json字符串解释为json对象,因为传递过来的是字符串,不转化的话,你得到将是字符串中第三个字符的值。
我们再来对这个一维数组做一下变化,我们发现上面的一维数组没有指定索引,所以它默认为数字索引,现在我们来给它加上键名:
考虑php数组
复制代码 代码如下:
$array=array('a'=>'1','b'=>'2','c'=>'3');

使用json_encode函数转化后,对应的json字符串为
复制代码 代码如下:
{"a":"1","b":"2","c":"3"}


我们很快就发现了其中的不同,最明显的就是字符串两端的[]变成了{},那么这个字符串是否也可以按上面那样处理后被js访问呢?我们不防试一试:
复制代码 代码如下:
访问json
function show(str){
var jobj=eval_r(decodeURI(str));
alert(jobj.a);
}

大家如果动手试了就知道,点击链接后,没有出现弹窗。为什么呢?是PHP生成的json字符串格式不对吗?不是的,这是我们在使用eval函数解释的时候,出错了。把上面的函数代码换成:
复制代码 代码如下:
function show(str){
var jobj=eval_r('('+decodeURI(str)+')');
alert(jobj.a);
}

再试试吧!怎么样,可以访问了吧。这告诉我们,在使用eval方法处理带有键名的json字符串时,需要在字符串两端加速括号。至于为什么,站长也不知道,站在巨人的肩膀上而已。
这里要注意,尽管PHP生成的json字符串
{"a":"1","b":"2","c":"3"}被传递给js后无法被直接解释为json格式,但是如果你在js中使用该字符串直接创建json数据,是可以的。试试下面的代码吧:
复制代码 代码如下:
var jobj={"a":"1","b":"2","c":"3"};
alert(jobj.b);

2、二维数组
二维数组在PHP用的应用非常广泛,因此了解二维数组转化后的json格式非常重要。有了上面的例子做铺垫,下面站长就直接给出示例代码:
复制代码 代码如下:
访问json
function show(str){
var jobj=eval_r(decodeURI(str));
alert(jobj[0][0]);
}

大家运行,会发现,这跟一维数组差不多,这是不带键名的例子,因此在show函数中,去掉字符串两端的括号也是可以的。
下面,我们对二维数组进行一下变化,在第二维中加入键名,请看示例代码:
复制代码 代码如下:
'1',"b"=>'2','3'))));?>')" id="aj">访问json
function show(str){
var jobj=eval_r('('+decodeURI(str)+')');
alert(jobj[0].a);
}

大家运行代码后,发现,这里我们访问json数据的方式有点不一样。上面我们用的是
alert(jobj[0][0]);
而这里我们用的是
alert(jobj[0].a);不要问我为什么,就是这样。这就是json的访问方式。
上面的例子,我们对二维数组的第二维添加了键名,下面我们对第一维添加键名,看看访问方式又有什么不同:
复制代码 代码如下:
访问json
function show(str){
var jobj=eval_r('('+decodeURI(str)+')');
alert(jobj.k[1]);
}

这里我们使用的是
jobj.k[1]这样的方式,大家一定已经发现了,只要数组中含有键名,当数组被转化为json格式后,就要使用
json对象.键名
这样的方式来访问该键下的元素,上面的例子中,k键下的数组元素是数字索引,所以在json中使用k[1]这样的方式来访问。
下面,我们对数组的第一维和第二维都添加键名:
复制代码 代码如下:
'1','2','3'))));?>')" id="aj">访问json
function show(str){
var jobj=eval_r('('+decodeURI(str)+')');
alert(jobj.k.a);
}

正如上面所提到的,只要含有键名,就必须以
json对象.键名
的方式来访问,如果有多个键就要用
json对象.键名.键名...
,不要问我为什么,这就是json的访问方式,只有javascript的发明者能向你解释,他为什么要这样规定。
结论:
1、将php中的数组转化为json字符串传递给js时。如果数组没有指定键名,那么可以直接使用js的eval方法将其转化为json格式供js处理;如果数组中含有键名,那么在使用eval方法处理时,需要使用
()
将json字符串括起来。
2、如果数组中含有键名,转化为json字符串后,在js中要用
json对象.键名.键名...
的方式来访问,如果是数字索引则用
json对象[1]
或者
json对象.键名[1]
这样的方式。
上面,我们主要讨论了,在PHP向js传递json字符串时,需要注意的事项。下面我们再来讨论,用js向php传递json字符串时需要如何处理。
聪明的你肯定已经知道了,只要将json数据用引号引起来作为字符串传递给PHP【通常用ajax进行】就可以用json_decode函数解码了。没错!就是这样!但是在构造json字符串的时候一定要仔细,如果你不经常构造json字符串,那么不妨用
echo json_encode(array('k'=>array("a"=>'1','2','3')))
这样的方式,查看你需要构造的目标字符串的json格式。这样你就可以在js中根据你想要的结果来构造了!
好了,今天对php和js之间如何使用json数据进行通信就讨论到这里,大家可以自己再试试将php的对象类型进行json编码后如何传递给js。
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
VUE3怎么使用JSON编辑器VUE3怎么使用JSON编辑器May 12, 2023 pm 05:34 PM

1、先看看效果图,可以自行选择展示效果2、这是我在vue3项目中使用的JSON编辑器,首先引入第三方插件npminstalljson-editor-vue3yarnaddjson-editor-vue33、引入到项目中//导入模块importJsonEditorVuefrom'json-editor-vue3'//注册组件components:{JsonEditorVue},4、一般后端返回的是会将JSON转为String形式我们传给后端也是通过这种形式,就可以通

SpringBoot之Json的序列化和反序列化问题怎么解决SpringBoot之Json的序列化和反序列化问题怎么解决May 12, 2023 pm 04:07 PM

控制json序列化/反序列化1.@JsonIgnoreProperties的用法@JsonIgnoreProperties(value={"prop1","prop2"})用来修饰Pojo类,在序列化和反序列化的时候忽略指定的属性,可以忽略一个或多个属性.@JsonIgnoreProperties(ignoreUnknown=true)用来修饰Pojo类,在反序列化的时候忽略那些无法被设置的属性,包括无法在构造子设置和没有对应的setter方法.2.@Js

Java怎么调用接口获取json数据解析后保存到数据库Java怎么调用接口获取json数据解析后保存到数据库May 14, 2023 am 10:58 AM

Java调用接口获取json数据保存到数据库1.在yml文件中配置自己定义的接口URL//自己定义的JSON接口URLblacklist_data_url:接口URL2.在Controller中添加请求方法和路径/***@Title:查询*@Description:查询车辆的记录*@Author:半度纳*@Date:2022/9/2717:33*/@GetMapping("/Blacklist")publicvoidselectBlacklist(){booleana=imB

深入解析JWT(JSON Web Token)的原理及用法深入解析JWT(JSON Web Token)的原理及用法Jan 10, 2023 am 10:55 AM

本篇文章给大家带来了关于JWT的相关知识,其中主要介绍了什么是JWT?JWT的原理以及用法是什么?感兴趣的朋友,下面一起来看一下吧,希望对大家有帮助。

java怎么校验json的格式是否符合要求java怎么校验json的格式是否符合要求May 15, 2023 pm 04:01 PM

JSONSchemaJSONSchema是用于验证JSON数据结构的强大工具,Schema可以理解为模式或者规则。JsonSchema定义了一套词汇和规则,这套词汇和规则用来定义Json元数据,且元数据也是通过Json数据形式表达的。Json元数据定义了Json数据需要满足的规范,规范包括成员、结构、类型、约束等。JSONSchema就是json的格式描述、定义、模板,有了他就可以生成任何符合要求的json数据json-schema-validator在java中,对json数据格式的校验,使用

php输出json无法解析的原因和解决方法【总结】php输出json无法解析的原因和解决方法【总结】Mar 23, 2023 pm 04:35 PM

PHP作为一种常见的编程语言,在web开发中使用广泛,其与前端交互的方式也多种多样。其中,输出Json数据是一种常见的交互方式,但有时候会碰到Json无法解析的问题。为什么会出现无法解析的情况呢?下面列举了几个可能的原因。

php如何将xml转为json格式?3种方法分享php如何将xml转为json格式?3种方法分享Mar 22, 2023 am 10:38 AM

当我们处理数据时经常会遇到将XML格式转换为JSON格式的需求。PHP有许多内置函数可以帮助我们执行这个操作。在本文中,我们将讨论将XML格式转换为JSON格式的不同方法。

SpringBoot怎么返回Json数据格式SpringBoot怎么返回Json数据格式May 19, 2023 pm 11:49 PM

一、@RestController注解在SpringBoot中的Controller中使用@RestController注解即可返回JSON格式的数据。@RestController注解包含了@Controller和@ResponseBody注解。@ResponseBody注解是将返回的数据结构转换为JSON格式。@Target({ElementType.TYPE})@Retention(RetentionPolicy.RUNTIME)@Documented@Controller@Respons

See all articles

熱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尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!