用Json实现PHP与JavaScript间数据交换的方法详解
发布时间:2020-05-24 14:35:42 所属栏目:PHP 来源:互联网
导读:本篇文章是对用Json实现PHP与JavaScript间数据交换的方法进行了详细的分析介绍,需要的朋友参考下
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 PHP 向 JavaScript 传值<FONT style="COLOR: #ff0000">PHP 文件 json.php<div class="codetitle"><a style="CURSOR: pointer" data="65392" class="copybut" id="copybut65392" onclick="doCopy('code65392')"> 代码如下:<div class="codebody" id="code65392"> <?php $arr = array( 'name' => '脚本之家', 'nick' => 'Gonn', 'contact' => array( 'email' => 'xxxxxxx@163.com', 'website' => '//www.jb51.cc', ) ); $json_string = json_encode($arr); echo "getProfile($json_string)"; ?> 光执行这个文件,其结果如下: <div class="codetitle"><a style="CURSOR: pointer" data="57106" class="copybut" id="copybut57106" onclick="doCopy('code57106')"> 代码如下:<div class="codebody" id="code57106"> getProfile({"name":"u5e0cu4e9a","nick":"Gonn", "contact":{"email":"xxxxxxx@163.com","website":"//www.jb51.cc"}}) json.php 是通过 json_encode 函数将数组扁平化,然后发送,相反有个 json_decode 函数。 那么在 JavaScript 如何调用呢?很简单,定义一个变量获取 PHP 传来的 Json,该 Json 具备对象的特性,我们可以用 array.name 这种方式来获取该 Json 的属性。 <div class="codetitle"><a style="CURSOR: pointer" data="35080" class="copybut" id="copybut35080" onclick="doCopy('code35080')"> 代码如下:<div class="codebody" id="code35080"> <script type="text/javascript"> function getProfile(str) { var arr = str; document.getElementById('name').innerHTML = arr.name; document.getElementById('nick').innerHTML = arr.nick; document.getElementById('email').innerHTML = arr.contact.email; document.getElementById('website').innerHTML = arr.contact.website; } <div id="name"> <div id="nick"> <div id="email"> <div id="website"> <script type="text/javascript" src="json.php"> 运行结果如下: <div class="codetitle"><a style="CURSOR: pointer" data="74601" class="copybut" id="copybut74601" onclick="doCopy('code74601')"> 代码如下:<div class="codebody" id="code74601"> 脚本之家 Gonn xxxxxxx@163.com //www.jb51.cc JavaScript 向 PHP 传值<FONT style="COLOR: #ff0000">json_encode.html<div class="codetitle"><a style="CURSOR: pointer" data="56038" class="copybut" id="copybut56038" onclick="doCopy('code56038')"> 代码如下:<div class="codebody" id="code56038"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <script src="json2.js" type="text/javascript"> <script type="text/javascript"> function JSON_test(o) { var user = { name:document.getElementById('txt_name').value, email:document.getElementById('txt_email').value, password:document.getElementById('txt_password').value } var json_string = JSON.stringify(user); document.getElementById('txt_json').value=json_string; alert("点击确定后将提交表单"); o.submit(); } <form id="form1" name="form1" method="post" action="json_encode.php"onsubmit="JSON_test(this);return flase;"> <label for="txt_name">姓名 <label for="txt_email">邮箱 <label for="txt_password">密码 |