PHP与Javascript通信流程深入解析2014-10-03 12:53:01

( 2人已投票,[高质量] )
分享: ╬收藏
31.3K

由于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生成。经过以上分析,相信大家对通信流程有了深入的了解。



原创内容哦亲,分享无界限,转载请注明文章链接及来源-雪炭网。





头像

snowcoal
  • 原创
  • PHP
  • JavaScript

本文标签:

原创PHPJavaScript

收藏到我的私密空间

标题:PHP与Javascript通信流程深入解析

作者:柳岸花明

你暂未登录,请登录后才可收藏至您的私密空间 确认取消
雪炭网

键盘操作 更便捷 -雪炭网雪中送炭-乐趣无限