开发者新闻
从简单开始。
下载我的教程模块（tutorial17.zip）并安装它。
现在转到主页，点击“教程”。
你现在会看到这样的词：“点击这里”。当你点击的时候，会弹出一个带有“Hello world”的警告窗口。这是一段之前教程中我已经解释过的非常简单的jQuery代码。
现在让我们把一些Ajax功能添加到这。
在教程文件夹中创建一个名为process.php的文件，并在其中放入以下内容：“这是通过Ajax传递的。”
现在转到教程/templates/tut_main.html，用以下内容替换所有代码
现在测试它。如你所见，这是一个简单的AJAX调用。
注意：为了使AJAX正常工作，请关闭xoops调试或将它设置为弹出窗口。
传递smarty模板
让我们更进一步，而不仅仅是通过Ajax传递一些文本，让我们传递一个smarty模板。
打开process.php文件，并将所有内容替换为以下内容
打开文件tutorial/templates/list.html，并将所有内容替换为以下内容
测试模块。现在您使用ajax调用传递智能模板。
绑定ajax模板
现在尝试给加载的模板绑定一个点击函数。
打开 tutorial/templates/tut_main.html，将所有代码替换为以下内容
预期的结果是，当你点击列表中的某个条目时，应该弹出一个警告窗口......试试吧。
没有任何事情发生。
原因在于DOM已经组装完成，所有javascript脚本都已执行。使用ajax，你在所有内容都已经组装完成后传递html。实际上这意味着你无法使用常规方法绑定未来的事件（例如模板中的链接）。
幸运的是，jQuery的开发者非常聪明，提供了一种处理这个问题的方法。
$.live()
打开文件 tutorial/templates/tut_main.html，并将所有代码替换为此代码
现在尝试运行该模块。它奏效了！jQuery真是太棒了！
我现在在使用 .live 与一个附加的事件处理器（点击）。
live() 非常灵活，并给你在ajax调用中附加javascript的灵活性。
如果这对你有帮助，请告诉我。
下载我的教程模块（tutorial17.zip）并安装它。
现在转到主页，点击“教程”。
你现在会看到这样的词：“点击这里”。当你点击的时候，会弹出一个带有“Hello world”的警告窗口。这是一段之前教程中我已经解释过的非常简单的jQuery代码。
现在让我们把一些Ajax功能添加到这。
在教程文件夹中创建一个名为process.php的文件，并在其中放入以下内容：“这是通过Ajax传递的。”
现在转到教程/templates/tut_main.html，用以下内容替换所有代码
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">script>
<script type="text/javascript">
$(document).ready(function(){
$('#clickme').click(function() {
$('#ajxDiv').load('<{$xoops_url}>/modules/tutorial/process.php');
});
}); //END READY
script>
<div id="clickme">
<a href="#">Click herea>
div>
<br /><br />
<div id="ajxDiv" class="item">
div> 现在测试它。如你所见，这是一个简单的AJAX调用。
注意：为了使AJAX正常工作，请关闭xoops调试或将它设置为弹出窗口。
传递smarty模板
让我们更进一步，而不仅仅是通过Ajax传递一些文本，让我们传递一个smarty模板。
打开process.php文件，并将所有内容替换为以下内容
require('../../mainfile.php');
//检查$xoopsTpl是否已被创建。如果没有，启动一个新的实例。
require_once XOOPS_ROOT_PATH . '/class/template.php';
if (!isset($xoopsTpl)) {
$xoopsTpl = new XoopsTpl();
}
//从数据库获取模板并将其分配给变量。
$tst = $xoopsTpl->fetch('db:list.html');
//echo变量。这将在Ajax调用中使用。
echo $tst
?> 打开文件tutorial/templates/list.html，并将所有内容替换为以下内容
<ul id="myList">
<li><a href="#">列表 1 a>/li>
<li><a href="#">列表 2 a>/li>
<li><a href="#">列表 3 a>/li>
/ul>测试模块。现在您使用ajax调用传递智能模板。
绑定ajax模板
现在尝试给加载的模板绑定一个点击函数。
打开 tutorial/templates/tut_main.html，将所有代码替换为以下内容
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">/script>
<script type="text/javascript">
$(document).ready(function(){
$('#clickme').click(function() {
$('#ajxDiv').load('<{$xoops_url}>/modules/tutorial/process.php');
});
$('#myList').click(function() {
alert("hello world");
});
}); //END READY
/script>
<div id="clickme">
<a href="#">点击这里a>
/div>
<br/>
<br/>
<div id="ajxDiv" class="item">
/div>预期的结果是，当你点击列表中的某个条目时，应该弹出一个警告窗口......试试吧。
没有任何事情发生。
原因在于DOM已经组装完成，所有javascript脚本都已执行。使用ajax，你在所有内容都已经组装完成后传递html。实际上这意味着你无法使用常规方法绑定未来的事件（例如模板中的链接）。
幸运的是，jQuery的开发者非常聪明，提供了一种处理这个问题的方法。
$.live()
打开文件 tutorial/templates/tut_main.html，并将所有代码替换为此代码
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"script type="text/javascript">
$(document).ready(function(){
$('#clickme').click(function() {
$('#ajxDiv').load('<{$xoops_url}>/modules/tutorial/process.php');
});
$('#myList').live('click', function() {
alert("hello world");
});
}); //END READY
script>
<div id="clickme">
<a href="#">点这里a>
div>
<br /><br />
<div id="ajxDiv" class="item">
div>现在尝试运行该模块。它奏效了！jQuery真是太棒了！
我现在在使用 .live 与一个附加的事件处理器（点击）。
live() 非常灵活，并给你在ajax调用中附加javascript的灵活性。
如果这对你有帮助，请告诉我。
|
|
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 |
 |
|