方法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,将所有代码替换为以下内容:
注意,我的数组现在有名字 "$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>
现在运行页面。不错吧?让我来解释这些更改。真正重要的代码片段是这一段
我现在正在使用一个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';
等等
现在我们已经从服务器中正确格式获取数据,我们现在可以用全新的方式生成HTML,但我将留待另一篇教程说明。
第3步 - 回顾所以现在我们已探讨了几种进行AJAX调用和jQuery函数的方法,让我们简要回顾一下。
$.load - 执行AJAX调用并返回HTML。
$.getJSON - 执行AJAX调用并返回格式为JSON的数据。
$.change - 在选择器上检测变化。
.bind("click", function()) - 等待在选择器上的点击
$.hide - 隐藏div、p等选择器。
$.show - 显示选择器