JSON是什么?
JSON代表“javascript对象符号”,引用:
“被广泛誉为的XML的浏览器继任者,JSON渴望只不过是一个简单的、优雅的数据格式进行信息交换的浏览器和服务器之间,在执行这个简单任务将引领下一版本的万维网本身。”
所以基本上认为JSON是一个PHP和Javascript之间的联结语言(在我们的例子中，jQuery)。所以当构建web页面(与jquery)我们可以使用ajax调用(无论是负载，$。ajax或其他)去从客户端到服务器,然后我们使用JSON去从服务器返回到客户机。现在你可能会问,我们不能使用json在两个方向吗?是的我们可以,但因为我们使用jquery,它已经发送到服务器的信息很好地格式化在$
_GET或$ _POST格式。
步骤1 -设置php文件
如果使用json,设置php文件变得更加容易。
<?php
if ($_GET['action']=='getlink'){
$ld=loadInfo ($_GET['link']);
echo $ld;
}
function loadInfo ($lnk){
switch ($lnk) {
case 1:
$list['name']='name john';
$list['desc']='my 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;
}
//正确格式用于javascript
$str=json_encode($list);
return $str;
}
?>
注意,我的数组在有名称" $ list[' name ']”,我也改变了这个:
$ str = json_encode($list);
这一行需要我们的php数组,并将它作为一个json字符串。
我已经说过我在先前的教程中,javascript不支持关联数组,但是,我们可以使用json来模拟他们。
步骤2 - HTML
开启测试。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");
}); //结束json
}); //端点击
}); //最终准备好了函数
</script>
<div id="ajaxBox"></div>
<div id="mylist">
<ul>
<li><a href="#" myval="1">cool site</a></li>
<li><a href="#" myval="2">new name</a></li>
<li><a href="#" myval="3">great space</a></li>
</ul>
</div>
<div id="myform">
<div id="formHeader">Add New</div>
<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("Edit");
$("#ajaxBox").text("All info loaded OK");
}); //结束json
我现在使用jquery函数,做一个ajax调用和返回数据作为json对象($ getjson)。这些数据然后被放置在一个变量称为“json”,模拟一个关联数组。注意到这一行:
$("#textfield").val(json.name);
我分配形式元素“#textfield”与“json.name”。酷的一件事关于json是,除了模拟关联数组,您可以编写它们深达你想要的,
为例:
$list['country']='england';
$list['country']['city']='london';
$list['country']['city']['zip code']='12345';
etc
现在我们是检索正确格式化的数据从服务器,我们现在可以生成html在一个完全不同的方式.
步骤3――回顾
所以现在我们看了几个方面做的ajax调用和jquery函数,让我们简要复习其中的一些。
$.load――做一个ajax调用并返回的html。
$.getJSON――做一个ajax调用并返回的数据格式化为json。
$.change――检测变化在一个选择器。
.bind(“点击”,函数()),等待一个点击一个选择器
$.hide――隐藏一个选择器如div,p,等等
$.show――显示一个选择器
站长行业门户(www.software8.co)文章，希望大家可以留言建议