我将向您展示两种实现相同结果的不同方法；1 使用jQuery通过JSON，另一个是我自己的解决方案，也可以完成任务。
第一步：理解困境
当我们要使用一个变量传递多个信息时，数组是非常有用的。在创建PHP数组时，您可以使用以下格式
这里有一个包含3个元素的关联数组。关联数组使用名称作为项目，例如 $list['id']。但是JavaScript不支持关联数组，因此我们必须使用以下格式
注意：JavaScript数组始终从0开始。
这种方法并不像JSON那样优雅，但它确实完成了任务。
第二步 - 目标
你们中的大多数人可以动态地从数据库中生成列表。所以我的目标是使用一个列表，当点击某个元素时，jQuery将加载有关该元素的所有信息并填充一个表单。这对于用户在不重新加载页面的情况下编辑信息来说是一个很好的方法。
第三步 - 创建HTML
创建一个名为test.html的HTML页面，并将以下代码放入其中
如您所见，这是一个简单的HTML页面，包含一个列表和一个表单。是基于我之前的教程设计的。'div' ajaxBox 将用于存储服务器对点击的响应。您还会注意到列表中有一个名为 'myval' 的属性。这个属性持有每个元素的ID，并用于jQuery中。
现在创建一个名为 myserv.php 的空PHP文件。
步骤 3- Jquery点击事件
下一步是针对列表中的每个点击项设置一个AJAX响应。
现在打开myserv.php，将所有代码替换为以下内容
我在之前的教程中已经介绍过这段代码，所以不会深入研究它的功能。
因此，我们现在可以将信息传递到服务器上
var formContent = "action=getlink&link="+hol;
将服务器响应放置到 "#ajaxBox" 中。太好了！现在让我们使用ID来获取数据。将myserv.php中的所有代码替换为以下内容
我们现在有一个加载所有信息的函数。为了使这篇教程简单，我使用了switch语句来交替使用3个示例。看这条线：
$str=$list[0].'<|>'.$list[1];
这是我要稍后传递给JavaScript数组的格式。PHP变量应该以字符串形式发送回来。它还需要一个符号，这个符号绝对不会被其他地方使用，这就是为什么我想出了 <|> 的原因。
重新加载HTML页面并尝试点击列表项。您现在可以在ajaxBox中看到我们的新字符串。
步骤 4 - 设置JavaScript以接受PHP字符串。
JavaScript有一个名为'split'的不错函数。它接受一个字符串，根据定义的分隔符将其分割，然后将每个片段放入一个JavaScript数组中。打开test.html，然后替换所有代码为以下内容
只需解释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，替换以下内容
为以下内容
替换以下内容
为以下内容
现在我们有一个 jQuery 函数，它延迟 1/2 秒执行，然后执行内部代码行。现在尝试测试它。你可以通过更改 '500' 来调整延迟计时器。
步骤 5 - 美化外观。
虽然这没问题，但我希望在 "ajaxBox" 中显示的文本仅是服务器警报或消息。所以我将创建一个隐藏的 div，作为中间步骤。
在 test.html 中替换所有代码为此代码
我添加了一些新内容。在 JavaScript 代码的开头，现在清除表单元素中的任何信息。当你点击列表元素时，表单的标题从 '添加新项' 更改为 '编辑'。在 ajaxBox 中也会出现一条 '所有正常' 的消息。
就像我之前说的那样，这种方法既不好也不坏。它有效。我下周将向您展示的 JSON 方法可能更受欢迎，因为它更容易应用，并且在 jQuery 中直接受支持。
希望您喜欢这个教程，并关注有关 JSON 方法 的更新！
第一步：理解困境
当我们要使用一个变量传递多个信息时，数组是非常有用的。在创建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那样优雅，但它确实完成了任务。
第二步 - 目标
你们中的大多数人可以动态地从数据库中生成列表。所以我的目标是使用一个列表，当点击某个元素时，jQuery将加载有关该元素的所有信息并填充一个表单。这对于用户在不重新加载页面的情况下编辑信息来说是一个很好的方法。
第三步 - 创建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;
}
//适当格式化以用于JavaScript
$str=$list[0].'<|>'.$list[1];
return $str;
}
?> 我们现在有一个加载所有信息的函数。为了使这篇教程简单，我使用了switch语句来交替使用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 函数，它延迟 1/2 秒执行，然后执行内部代码行。现在尝试测试它。你可以通过更改 '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 中直接受支持。
希望您喜欢这个教程，并关注有关 JSON 方法 的更新！
|
|
Login
Search
Recent Comments
Who's Online
Donat-O-Meter
| Stats | |
| Goal: | $100.00 |
| Due Date: | Aug 31 |
| Gross Amount: | $0.00 |
| Net Balance: | $0.00 |
| Left to go: | $100.00 |
 |
|