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