jQuery的教程：PHP数组传递JSON

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)文章，希望大家可以留言建议