又一个php与js数据交互的例子

php和js如何通过json互相传递数据相关问题探讨

作者: 字体:[增加 减小] 类型:转载

json是js的一种数据格式,可以直接被js解析,php无法直接读取json数据,但是php提供了json_decode函数来对json数据进行转化,从而可以被php脚本访问,今天,站长就和大家一起来探讨这个问题,感兴趣的你可以参考下哦

当我们在结合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函数对其编码,如:

复制代码代码如下:

<a href="javascript:show(‘<?php echo urlencode(json_encode(array(‘1‘,‘2‘,‘3‘)));?>‘)" id="aj">访问json</a>

我们可以用下面的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访问呢?我们不防试一试:

复制代码代码如下:

<a href="javascript:show(‘<?php echo urlencode(json_encode(array(‘a‘=>‘1‘,‘b‘=>‘2‘,‘c‘=>‘3‘)));?>‘)" id="aj">访问json</a> 
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格式非常重要。有了上面的例子做铺垫,下面站长就直接给出示例代码:

复制代码代码如下:

<a href="javascript:show(‘<?php echo urlencode(json_encode(array(array(‘1‘,‘2‘,‘3‘))));?>‘)" id="aj">访问json</a> 
function show(str){ 
var jobj=eval_r(decodeURI(str)); 
alert(jobj[0][0]); 
}

大家运行,会发现,这跟一维数组差不多,这是不带键名的例子,因此在show函数中,去掉字符串两端的括号也是可以的。 
下面,我们对二维数组进行一下变化,在第二维中加入键名,请看示例代码:

复制代码代码如下:

<a href="javascript:show(‘<?php echo urlencode(json_encode(array(array("a"=>‘1‘,"b"=>‘2‘,‘3‘))));?>‘)" id="aj">访问json</a> 
function show(str){ 
var jobj=eval_r(‘(‘+decodeURI(str)+‘)‘); 
alert(jobj[0].a); 
}

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

复制代码代码如下:

<a href="javascript:show(‘<?php echo urlencode(json_encode(array(‘k‘=>array(‘1‘,‘2‘,‘3‘))));?>‘)" id="aj">访问json</a> 
function show(str){ 
var jobj=eval_r(‘(‘+decodeURI(str)+‘)‘); 
alert(jobj.k[1]); 
}

这里我们使用的是 
jobj.k[1]这样的方式,大家一定已经发现了,只要数组中含有键名,当数组被转化为json格式后,就要使用 
json对象.键名 
这样的方式来访问该键下的元素,上面的例子中,k键下的数组元素是数字索引,所以在json中使用k[1]这样的方式来访问。 
下面,我们对数组的第一维和第二维都添加键名:

复制代码代码如下:

<a href="javascript:show(‘<?php echo urlencode(json_encode(array(‘k‘=>array("a"=>‘1‘,‘2‘,‘3‘))));?>‘)" id="aj">访问json</a> 
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。

时间: 2024-10-25 07:04:26

又一个php与js数据交互的例子的相关文章

浅谈混合开发与Android,JS数据交互

本文是作者原创,如转载请注明出处! 一.概论 现在时代已经走过了移动互联网的超级火爆阶段,市场上移动开发人员已经趋于饱和,显然,只会原生APP的开发已不能满足市场的需求,随着H5的兴起与火爆,H5在原生APP中的使用越来越广泛,也就是我们常说的混合开发(Hybrid APP).最新很火的微信小程序相信大家都是知道的,实际上微信小程序加载的界面就是一个HTML5的界面,HTML5界面在一些电商类的APP中主要承担展示数据的作用,但是他的作用并不仅限于此,最起码js调用原生方法和原生调用js的方法是

【JS数据交互-Ajax相关知识(一)】

JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataType: '', data: { }, success: function(){ }, error: function(){ } }) 原生js实现Ajax方法: var Ajax={ get: function(url, fn) { var obj = new XMLHttpRequest(); // XMLHttpRequest对象用于在后台与服务器交换数据 obj.open('GET', url

用PHP和Ajax进行前后台数据交互——以用户登录为例

很多网站中都有用户登录系统,要完成用户的注册和登陆,就一定要用到前后台的数据交互.在这里以简单的用户注册和登陆为例介绍一下前后台交互的大致流程. 首先,我们来做一个简单的登陆界面. 这里为了方便我使用了bootstrap插件 <form class="form-horizontal"> <div class="form-group"> <label>用户名</label> <input type="te

iOS开发日记27-WebView与JS的交互

今天博主有一个WebView与JS的交互的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. WebView与JS的交互分为两种种方式:1.在OC中调用JS 2.在JS中调用OC 网页试用[NSString stringWithFormat:@"http://cn.bing.com"] 一.在OC中调用JS 直接上代码 -(void)webViewDidFinishLoad:(UIWebView *)webView { //    NSString *docStr=[webVi

ashx 文件 与js文件数据交互

//js代码 //城市下拉列表             $("#selPro").change(function() {                 var option = "";                 $.ajax({                     type: "post",                     url: "homeHandler/HomeProvince.ashx",     

前后端数据交互处理基于原生JS模板引擎开发

json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那里断点,观察是否有错误. <!DOCTYPE html> <html> <head> <title>前后端数据交互处理原生JS模板引擎开发</title> <meta charset ='utf-8'> <script type=&

实现OC与JS的交互

oc-->js  stringByEvaluatingJavaScriptFromString,其参数是一NSString 字符串内容是js代码(这又可以是一个js函数.一句js代码或他们的组合),当js函数有返回值或一句js代码有值返回可通过stringByEvaluatingJavaScriptFromString的返回值获取. js-->oc 利用webView的重定向原理(即重新在js中指定document.location的值,此为一url),只要在这个url字符串中按自定义的规则指

OC与JS的交互详解

事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img > 标签自动加载,并把下载图片的操作放在native端来处理,并通过JS将图片在Cache中的地址返回给UIWebview. 之所以要把图片操作放在

iOS开发——实用技术OC篇&amp;UIWebView与JS的交互

UIWebView与JS的交互 事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img > 标签自动加载,并把下载图片的操作放在native端来处理,并通过JS将图片在Cache中的地址返回给UIWebv