PHP与Javascript通信流程深入解析2014-10-03 12:53:01
由于PHP为后台语言,而Javascript为前端语言,所以两个不是一个层面的语言如何通信是人们常常关心的问题。
对于新手来说,守先解释一下为啥不是一个层面的问题;
PHP是需要在后台服务器端先执行完才通过HTTP的方式反馈给用户,也就是PHP执行完毕后的输出代码,下载到用户的浏览器上去“渲染”,而这个时候js才开始工作,所以两个根本就不是一个时间层面。为了让两者能通信,我们用尽办法来使通信更加容易。
首先想到的是,没错“直接输出Js代码”:
<?php echo "<script>alert(123);</script>"; ?>
这是很经典的方法,演化方式也多种多样,比如:
<?php $myVal = 123; ?> //long distance <script type="text/javascript"> var val = <?php echo $myVal;?>; alert(val);//123 </script>
以上方法不错,但是“麻花代码”便捷却损失了不少维护资源,想像一下,你看到另一个人写的代码,里面有上面处这样的东西,将是多么受打击。
接着界绍的是,你不可不知的一个数据类型JSON
Json格式被支持的如此的好,以至于荣登通信榜首,html/txt等就先不提了,有人说XML为啥会输于JSON,我要告诉你,不是因为xml类型弱,而是适应场合有区别,xml同样可包含大量有用信息,有时还显得更为直观,但一个主要原因,让我们选择Json,那就是解析更方便。这就好比,外星人来地球采访,问“你法拉利车这么好,你为啥开个比亚迪。”
将数据包装,而不是后台全权处理是符合MVC理念的。下面界绍一下PHP如何包装数据:
<?php //mysql data //...... $resultArray1 = array(); $resultArray2 = array(); while($i=0;$i<10;$i++){ $resultArray1[0] = $data1; $resultArray1[1] = $data2; $resultArray1[2] = $data3; array_push($resultArray2,$resultArray1); } echo json_encode($resultArray2);//2维
记住PHP最擅长的就是数据处理,JS主要配合CSS解决UI问题,也就是为啥JS与CSS并称前端开发。
以上代码只是简单诠释数据处理与输出的意义
到目前为止,我们得到了通信最基本的东西-数据。
(搭配着Ajax实现异步处理将会灰常灰常有用)
接下来让我们完成通信的另一半,把数据接由前端。
JS是的eval()函数,专治各种不服-JavaScript(JS) eval 函数详解
var obj = eval('(' + str + ')'); console.log(obj[0][0]);//val1 console.log(obj[0][1]);//val2
这样数据就得到了,想显示在什么方那是布局的事了,样式那是CSS的事了
不过这个函数也有不适配器的时候,这时只需这样处理一下,诀窍是先查一下选回数据有没有'{'
如果没有,需要这样处理
if(-1 == str.indexOf('{')) str = '{'+str+'}';
你可能需要这样处理的哦。
提到上面说的异步处理,个人来讲还是推荐用jQuery插件,因为手动实现Ajax麻烦,一样要包含文件,还不如用别人封好的,jQuery是公认的、使用人数最多、兼容性最好的一个JS插件,相关内容自行搜索也可参考另一篇文章 Div里面载入另一个页面的实现(Ajax取代框架)
jQuery实现的一关键代码:
var parames={"type1":"paramer1","type2":"paramer2"}; $.ajax({ url:'myTest.php', type:'post', dataType:'json', data:parames, error: function(){alert('error');}, success:function(str){ //parase json data here } });
MVC思想还是很重要的,那就是谁的事交由谁做,否则连CSS代码也全能用PHP生成。经过以上分析,相信大家对通信流程有了深入的了解。
原创内容哦亲,分享无界限,转载请注明文章链接及来源-雪炭网。