使用Ajax将数据加载到 <div> 在Joomla 3.1组件中

Question

我一直在试图弄清楚这一点，尽管我发现在线上的各种示例已经完全混淆了，因为似乎没有一个示例与我的尝试完全吻合。

我有一个正在构建的Joomla组件，并且在前端具有单个视图。 在默认模板（'default.php'）中，创建了两个divs 。 一个包含项目列表，另一个为空白。 我有让我单击列出的项目之一并返回该项目唯一的ID的代码。 然后，我想获取该ID并在Ajax调用中使用它，以从数据库的表中检索数据项。

该组件称为“ com_pub”，它应显示每个列表中的酒吧和信息。

我有一个名为controllers的文件夹（即“ com_pub/controllers ”），并且其中有一个名为'pubitems.php'的控制器，它只是扩展了JController类：

<?php
defined('_JEXEC') or die("Resricted Access!");

class PubControllerPubitems extends JController
{
}
?>

显示初始页面时此方法正常

我在前端的“ controllers”文件夹中创建了一个名为“ pubitems.json.php”的新控制器，其中包含以下代码：

<?php
defined('_JEXEC') or die;

class ContentFetchPubitems extends JController
{   

public function RetrieveContent()
{
 echo(json_encode($data));
 return;
}
}

我还在“ tmpl”文件夹中创建了一个文件“ content_response”：

<?php

echo "Dummy Response";

?>

在我的“ default.php”文件（位于视图的“ tmpl”文件夹中）中，我有一个脚本，该脚本使用JQuery从列表中获取选定的ID，然后进行Ajax调用：

<script>
jQuery(".tocli").click(function(){
alert(this.id);
url = 'index.php&option=com_pub&controller=pubitems&task=RetrieveContent&tmpl=content_response&format=raw&dataType=json';
var jqxhr = jQuery.ajax(url,function(result){                     
alert("success");
})
.fail(function() {
alert( "Error: " );
})
.always(function() {
alert( "Finished: " + jqxhr.statusText);
});              
});
</script>

显然，Ajax调用所指向的函数不仅要做回声，而且还需要做更多的事情，并且在我完成基本工作后会从数据库中获取数据。

jQuery确实返回了变量“ this.id”，并且在警报中正确显示了该变量，但目前我什至没有尝试在Ajax调用中发送该变量-我只是在尝试获取对函数的调用基本级别（如果有意义）。

其他警报起作用，但是不会触发“ .success”警报，“。always”警报显示“ Finished：Not Found”，而HTTPFox显示这是404 error 。

因此，我认为这意味着Ajax调用甚至都没有到达“ content_response”文件，并且URL中的某些内容是错误的。 潜在的问题是我并没有真正了解url的构造（可能还有其他问题-我仍在学习）。 我尝试更改url中的各种元素，但没有成功。

我也不清楚我是否正确设置了控制器和其他文件。 似乎有许多不同的方法可以做到这一点，而我所看到的很多东西与其他文章相矛盾，这让我很困惑。

对于这么长的帖子，我深表歉意，但我想尽可能地明确我要做的事情以及到目前为止所做的事情。 真正了解Joomla 3.1的人对此提供的任何指导将不胜感激。

---

这是基于我根据Lodder的非常有用的评论（发现URL中存在错误）而做的其他工作的更新。 不知道我是否应该以这种方式进行操作，但是有人可能会告诉我是否不这样做。

改正网址后，我会根据反复试验和更多的网络搜索进行其他一些更改：

1）我摆脱了对模板（tmpl = content_response）的引用，因为它突然让我想使用jQuery将ajax调用的结果插入到现有页面中，因此不想加载其他模板模板。

2）我更改了URL的“任务”元素，以包括控制器的名称以及我要调用的函数（因此task = pubitems.RetrieveContent而不是task = RetrieveContent）。

3）我摆脱了URL的“ dataType = json”部分，但保留了“ format = raw”。

4）我创建了一个名为pubitems.raw.php的新控制器来保存RetrieveContent函数。

5）我在警报中添加了一些信息，以查看是否可以获取有关ajax进程的更多信息。

现在，我将脚本包含在default.php模板中，如下所示：

<script>
jQuery(".toc,li").click(function(){
alert(this.id);
var data_to_send = {'id': this.id};
alert(data_to_send);
url = 'index.php?option=com_pub&controller=pubitems&task=pubitems.RetrieveContent&data=data_to_send&format=raw';
var jqxhr = jQuery.ajax(url)
.done(function(result) {
alert("Success: " + jqxhr.status + " " + jqxhr.statusCode() + " " + jqxhr.statusText);
})
.fail(function(result) {
alert("Error: " + jqxhr.status + " " + jqxhr.statusCode() +" " + jqxhr.statusText);
})
.always(function(result) {
alert("Finished: " + result);
}); 
});
</script>

新的控制器如下所示：

<?php
defined('_JEXEC') or die("Resricted Access!");

class PubControllerPubitems extends JControllerForm
{
public function RetrieveContent()
{
$app = JFactory::getApplication();
$post_data = $app->input->get('id');
//  $post_data="This is a test";

echo($post_data);
}
}
?>

如果我不注释掉$ post_data =“ This is a test”行，那么我会从ajax调用中返回“ This is a test”，并且一切正常。 如果我将其注释掉，我什么也没得到，所以当从default.php模板发出或在pubitems.raw.php控制器的函数中发出的ajax调用仍然存在问题。 我仍在尝试找出答案，但欢迎您提供任何其他帮助。

Answer 1

我终于将其与持续的反复试验和大量使用Google一起使用。

控制器如下所示：

<?php
defined('_JEXEC') or die("Resricted Access!");

class PubControllerPubitems extends JControllerForm
{
public function RetrieveContent()
{
$input = JFactory::getApplication()->input;
$cont_num = $input->get('pub_num', '', 'post');

$db = JFactory::getDBO();
$query = $db->getQuery(true);
$query->select('*');
$query->from('#__pub'); 
$query->where('pubid = ' . $pub_num); 


$db->setQuery($query); 

if ($db->getErrorNum()) {
     $return_Data = $db->getErrorMsg();
     $return_data = "Database Error";
     }
 else 
    {
    $list = $db->loadObjectList();
    foreach ($list as $item) {
    pub_txt = $item->info;
    $return_data = "Database Access Succeeded";
    $return_data = $pub_txt;
    }
    }

echo($return_data);
}
}
?>

现在，我发现Joomla 3.1中已弃用了应该捕获数据库错误的方式，并且应该将它们作为异常处理，但是此版本可以正常工作。

我将从模板中重复整个脚本部分，以便很清楚是否有人愿意做同样的事情：

<script>
jQuery(".toc li").click(function(){
var data_to_send = {pub_num: this.id};
url = 'index.php?option=com_pub&controller=pubitems&task=pubitems.RetrieveContent&format=raw';
var jqxhr = jQuery.ajax(url,{
data: data_to_send
    })
    .done(function(result) {
    alert("Success: " + jqxhr.status + " " + jqxhr.statusCode() + " " + jqxhr.statusText);
    jQuery('#name-box').empty();
    $pub_txt = jqxhr.responseText;
    jQuery('#name-box').text($pub_txt);
    })
.fail(function(result) {
alert("Error: " + jqxhr.status + " " + jqxhr.statusCode() +" " + jqxhr.statusText);
})
.always(function(result) {
    alert("Finished: " + jqxhr.responseText);
});
});
</script>

我之所以离开警报，是因为当我试图弄清楚发生了什么时，我发现这些功能非常有帮助。

我正在改变很多东西并尝试它们，但最终我认为关键的事情是：

调用RetrieveContent函数时，我包括了控制器的名称，因此它是task = pubitems.RetrieveContent。

我更改了编码数据的方式。 从我在网上可以找到的信息很难弄清楚，最终我还是经过反复试验才到达那里。

我停止尝试通过将数据包含在url中来发送数据。 相反，我将其单独包含在ajax调用“ data：data_to_send”中。 我在想出一种对有效的ajax调用进行数据编码的方法之前就做了此操作。

我希望这对其他人有帮助。 我花了很长时间才完成这项工作，当然，现在，我已经完成了它，看起来很简单，但是希望这可以为其他人节省很多时间。

Answer 2

您应该为JInput请求指定数据类型。

$cont_num = $input->get('pub_num', 'INT', 'post');

永远不要信任输入，即使您使用CSRF令牌时也应该强制输入类型。 目前可能不需要，但是它是一个好习惯（这是我的编码指南中的要求）。