开发者新闻：jQuery教程：将PHP数组传递给JavaScript数组
发布者： kaotik于2009/11/12 16:30:00 113150次阅读将PHP数组传递给JavaScript数组。这是一个针对熟悉jQuery、Ajax和PHP的人士的高级教程。它将教会你如何使用jQuery获取PHP数组，将其转换为JavaScript数组，然后对其进行操作。
我将展示两种实现相同结果的方法；1通过jQuery使用JSON，另一种是个人hack，也可以实现同样的任务。
步骤1 理解困境
当我们仅使用一个变量就要传递多个信息时，数组是非常好的。当创建一个PHP数组时，你可以使用这个格式
$list['id'] = '3';
$list['name'] = 'jack in a box';
$list['desc'] = 'bla bla bla and more bla'; 这里我们有一个包含3个元素的关联数组。关联数组使用名称作为其项；$list['id']。JavaScript不支持关联数组，所以我们必须使用以下格式
$list[0] = '3';
$list[1] = 'jack in a box';
$list[2] = 'bla bla bla and more bla'; 注意：JavaScript数组始终从0开始。
方法1 - 我的方法
这种方法并不像JSON那样优雅，但它确实完成了任务。
步骤2- 目标
你们大多数人都可以动态地从数据库中生成一个列表。因此，我的目标是使用一个列表，当点击一个元素时，jQuery将加载该元素的所有相关信息，然后填充一个表单。这对于用户在不重新加载页面的情况下编辑信息来说是一个很好的方法。
第3步 - 创建HTML
创建一个名为test.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">
$(document).ready(function() { //Finish loading the entire page before processing any javascript
});
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> 如您所见，这是一个简单的HTML页面，包含列表和表单。基于之前的教程。'div'中的ajaxBox用于保存服务器对点击的响应。您还会注意到列表上有一个名为'myval'的属性。它保存每个元素的ID，并用jQuery使用。
现在创建一个名为myserv.php的空PHP文件。
第3步 - jQuery点击事件
下一步是为每个列表项点击设置一个AJAX响应。
<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">
$(document).ready(function() { //Finish loading the entire page before processing any javascript
$("#mylist a").bind("click", function() {
var hol=$(this).attr('myval');
var formContent ="action=getlink&link="+hol;
$("#ajaxBox").load('myserv.php',formContent);
});
});
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> 现在打开myserv.php，并将所有代码替换为以下内容
echo 'hello world';
?> 这个代码我在之前的教程中已经介绍过，所以这里不再深入讲解它的作用。
因此，我们现在有了传递给服务器的信息
var formContent = "action=getlink&link=" + hol;
然后将服务器响应放在"#ajaxBox"中。太好了！现在让我们使用ID来获取我们的数据。将myserv.php中的所有代码替换为以下内容
if ($_GET['action']=='getlink'){
$ld=loadInfo ($_GET['link']);
echo $ld;
}
function loadInfo ($lnk){
switch ($lnk) {
case 1:
$list[0]='name john';
$list[1]='my desc fsdfsd';
break;
case 2:
$list[0]='orians gate';
$list[1]='bla for bla';
break;
case 3:
$list[0]='space 1999';
$list[1]='whos there anyone';
break;
}
//properly format for use in javascript
$str=$list[0].'<|>'.$list[1];
return $str;
}
?> 我们现在有一个函数可以加载所有信息。为了保持这个教程的简洁，我使用了3个例子来切换。看看这一行
$str=$list[0].'<|>'.$list[1];
我将使用这个格式在之后传递给JavaScript数组。PHP变量应以字符串形式发送回。它还需要一个在任何地方都不会使用的连接符号，这就是为什么我想出了<|>。
重新加载html页面，然后尝试点击列表项。现在您可以在ajaxBox内看到我们新的字符串。
步骤 4 - 将javascript设置为接收我们的php字符串。
Javascript有一个很棒的功能叫做'split'。它接受一个字符串，根据一个定义的分隔符进行分割，然后将每个片段放到一个javascript数组中。打开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">
$(document).ready(function() { //Finish loading the entire page before processing any javascript
$("#mylist a").bind("click", function() {
var hol=$(this).attr('myval');
var formContent ="action=getlink&link="+hol;
$("#ajaxBox").load('myserv.php',formContent);
var txt = $("#ajaxBox").text();
var php=txt.split("<|>");
$("#textfield").val(php[0]);
$("#textarea").val(php[1]);
});
});
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> 以下只有 4 行需要进行解释
var txt = $("#ajaxBox").text();
var php=txt.split("<|>");
$("#textfield").val(php[0]);
$("#textarea").val(php[1]);
第一行抓取了我们div "#ajaxBox" 内的所有文本。这是一个中间步骤，我们无法避免使用这种方法。接下来我将向您展示一种更巧妙的方法。
第二行根据分隔符 "<|>" 将字符串分割，并将其放置到名为 'php' 的javascript数组中。
第三和第四行分别获取javascript数组的一个片段，并将其分配给每个表单元素。
因此，当用户点击列表项时，jQuery执行一个AJAX调用，从服务器获取信息并将其放入表单中。这是一种允许用户编辑信息的好方法！
现在尝试继续点击。请注意，“ajaxBox”和表单中的内容之间存在差异。这是因为javascript的处理速度比页面上元素刷新的速度快。为了解决这个问题，我们将在代码中放置一个小的延迟。请下载此jQuery插件。现在打开test.html并替换以下内容：
<script language="javascript" src="jquery-1.3.2.min.js">script> 用以下内容替换：
<script language="javascript" src="jquery-1.3.2.min.js">script>
<script language="javascript" src="jquery.delay.js">script> 替换以下内容：
var txt = $("#ajaxBox").text();
var php=txt.split("<|>");
$("#textfield").val(php[0]);
$("#textarea").val(php[1]); 用以下内容替换：
$(this).delay(500,function(){
var txt= $("#hidden").text();
var php=txt.split("<|>");
$("#textfield").val(php[0]);
$("#textarea").val(php[1]);
}); 现在我们有一个jQuery函数，它延迟执行半秒，然后执行内部的行。现在尝试测试它。您可以通过更改'500'来调整延迟计时器。
第5步 - 让它看起来更漂亮。
尽管它运行良好，但我希望显示在"ajaxBox"中的文本仅是服务器警报或消息。所以我将创建一个隐藏的div作为中间步骤。
在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;
$("#hidden").load('myserv.php',formContent);
$(this).delay(500,function(){
var txt = $("#hidden").text();
var php=txt.split("<|>");
$("#textfield").val(php[0]);
$("#textarea").val(php[1]);
$("#formHeader").text("Edit");
$("#ajaxBox").text("All info loaded OK");
});
});
});
script>
<div id="hidden">div>
<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> 我添加了一些新内容。在JavaScript代码的开头，我现在清除表单元素内的任何信息。当您点击列表元素时，表单的标题将从'添加新'更改为'编辑'。在ajaxBox中也会显示一条消息，表明'一切顺利'。
正如我之前所说的，这种方法既不好也不坏。它有效。下周我将展示的JSON方法可能是首选方法，因为它更易于应用，并且在jQuery中得到直接支持。
希望您喜欢这个教程，并请继续关注<екст important part hidden>的JSON方法！
Re: Jquery Tutorial: Passing php arrays to javascript arrays
