开发者新闻：jQuery教程：通过JSON传递PHP数组

发布者： kaotik于2009/11/16 10:40:00 73512次阅读
本教程是之前教程的延续。这将教你使用JSON的好处。


方法2


什么是JSON？
JSON代表“javascript对象表示法”，引用
"被誉为浏览器中XML的继承者，JSON雄心勃勃地要成为浏览器和服务器之间信息交换的一种简单、优雅的数据格式；在这个过程中，它将引领下一个版本的万维网本身进入世界。"
所以，基本上，我们可以把JSON看作是PHP和JavaScript（在我们的案例中，jQuery）之间的连接语言。因此，当我们构建网页（使用jQuery）时，我们可以使用Ajax调用（无论$.load, $.ajax还是其他方法）从客户端到服务器，然后我们使用JSON从服务器返回客户端。现在你可能想知道，我们是否可以在两个方向上使用JSON？是的，我们可以，但是由于我们正在使用jQuery，它已经会将信息以格式化的形式发送到服务器，格式为$_GET或$_POST。

步骤1- 设置PHP文件

使用JSON，设置PHP文件变得简单多了。将我的上一个教程复制到一个新文件夹中。现在打开myserv.php，将所有代码替换为此代码


如果（$_GET['action'] == 'getlink'）{

$ld=loadInfo （$_GET['link']）；
echo $ld；
}


函数loadInfo （$lnk）{

switch（$lnk）{
case 1：
$list['name']='name john'；
$list['desc']='我的描述 fsdfsd'；
break；
case 2：
$list['name']='orians gate'；
$list['desc']='bla for bla'；
break；
case 3：
$list['name']='space 1999'；
$list['desc']='whos there anyone'；
break；
}
$str=json_encode（$list）；

return $str；
}
?>


请注意，我的数组现在有名称 "$list['name']"，我还改变了这个
$str=json_encode($list);
这一行将我们的PHP数组编码为JSON字符串。
正如我在之前的教程中提到的，JavaScript不支持关联数组，但是我们可以使用JSON来模拟它们。

步骤2- HTML

打开test.html，将所有代码替换为以下内容

<style type="text/css">
#ajaxBox { background-color:#FFFF99; border:thin solid #FF0000; width:70%; height:50px;}
#formHeader{text-align:center; font-size:18px; color:#0000FF;}
#myform{text-align:center;}
style>


<script language="javascript" src="jquery-1.3.2.min.js">script>
<script language="javascript" src="jquery.delay.js">script>

<script language="javascript">
$(document).ready(function() { //Finish loading the entire page before processing any javascript

$("#hidden").hide();
$("#textfield").val("");
$("#textarea").val("");

$("#mylist a").bind("click", function() { 
var hol=$(this).attr('myval');
var formContent ="action=getlink&link="+hol;

$.getJSON("myserv.php",formContent, function(json){
$("#textfield").val(json.name);
$("#textarea").val(json.desc);
$("#formHeader").text("Edit");
$("#ajaxBox").text("All info loaded OK");
}); //End json

}); //End click

}); //End ready function
script>

<div id="ajaxBox">div>

<div id="mylist">
<ul>
<li><a href="#" myval="1">cool sitea>li>
<li><a href="#" myval="2">new namea>li>
<li><a href="#" myval="3">great spacea>li>
ul>
div>

<div id="myform">
<div id="formHeader">Add Newdiv>
<form name="form1" method="post" action="">
<label>Name<input type="text" name="textfield" id="textfield">label><br /><br />
<label>Desc<textarea name="textarea" id="textarea" cols="45" rows="5">textarea>label>
form>
div>


现在尝试运行页面。不错吧？让我解释一下这些更改。这里真正重要的代码是这一段：

$.getJSON("myserv.php",formContent, function(json){
$("#textfield").val(json.name);
$("#textarea").val(json.desc);
$("#formHeader").text("编辑");
$("#ajaxBox").text("所有信息已成功加载");
}); //End json


我现在正在使用一个jQuery函数进行Ajax调用，并将数据作为JSON对象返回 ($.getJSON)。然后这些数据被放置在名为"json"的变量中，这模拟了一个关联数组。请注意这一行

$("#textfield").val(json.name);

我正在将表单元素"textfield"赋值为"json.name"。JSON很酷的一点是，除了模拟关联数组外，你还可以将其写得很深，例如

$list['country']='england';
$list['country']['city']='london';
$list['country']['city']['postal code']='12345';
等等


现在我们已经从服务器获取了正确格式的数据，我们现在可以用完全不同的方式来生成HTML，但我会把这个留到下一个教程。

步骤 3- 回顾

所以现在我们已经探讨了几种Ajax调用和jQuery函数的方法，让我们简要回顾一下。

$.load - 执行Ajax调用并返回HTML。

$.getJSON - 执行Ajax调用并返回格式为JSON的数据。

$.change - 在选择器上检测到变化。

。bind("click", function()) - 等待在一个选择器上的点击

$.hide - 隐藏一个选择器，如div、p等

$.show - 显示一个选择器