%23 %338 %2013 %15:%五 %PM

在Joomla中使用Ajax

作者
给本项目评分
(0 得票数)

目标:

 这篇文章的目标是在自己的组件中使用Ajax技术。

理论:

1,在default.php文件中添加必要的JavaScript ajax代码。或者是其他的模版:components/com_组件的名称/views/tmpl/default.php文件中

示范代码:

<script languange="javascript">

     function ajaxGetCitys(country_id)

   {

        var xhr = getXhr();

    xhr.onreadystatechange = function(){

            if(xhr.readyState == 4 && xhr.status == 200)

           {

                   var city = documnet.getElementById('city');

                    try {

                           xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

                          xmlDoc.async = "false";

                          xmlDoc.loadXML(xhr.responseText);

                        }

                      catch(e)

                        {

                             try {

                                          parser = new DOMParser();

                                          xmlDoc = parser.parsFromString(xhr.responseText,"text/xml");

                                  }

                                catch(e)

                                    {

                                          alert(e.message);

                                       }

                        }

              var options = xmlDoc.getElementsByTagName('options').item(0);

              city.innerHTML="";

               for(i=0;i<options.childNodes.length;i++)

              {

                      var newoption = document.createElement("option");

                     var myoption = options.childNodes[i];

                     var newtext = document.createTextNode(myoption.childNodes[0].nodeValue);

                     newoption.setAttribute("value",myoption.getAttributeNode('id').value);

                    newoption.appendChild(newtext);

                   city.appendChild(newoption);

              }

 

            }

        

   }

   }

     xhr.open("GET","index2.php?option=com_user&task=listcity&coutntry_id="+country_id,true);

</script>

 

 

2,在controller.php文件中 添加一个新的函数 这个函数的名称就是task的名称。就像本例中国使用listcity函数。

具体代码:

       function listcity()

  {

      global $mainfram;

     $country_id =  JRequest::getVar('country_id');

    $model = $this->getModel('register');

   $states = $model->getStates($country_id);

   $return ="<?xml version=\"1.0\" encoding =\"uft8\" ?>";

  $return .="<options>";

  $return.="<option id='0'>".JText::_('---Select city----')."</options>";

  if(is_array($states))

  {

     foreach($states as $state)  

   {

      $return .="<option id='".$states->state_id."'>".JText::_($state->state_name)."</option>";

  }

 $return . ="</options>";

echo $return ;

$mainframe ->close();

 }

 }

 

3,在上一个例子中,我们用了一个getStates($country_id) 函数,这个函数在register模型中从后台数据中获取城市列表。

 

自己写代码实践:

在我的组件中先试用一下这个方法。

实现过程:

1,首先在自己的模版中写一个函数,用来响应点击的事件。

2,在这个函数中调用getXhr()函数。当然这个函数我目前还是自己写的。getXhr()和普通的js代码使用Ajax一样。

3,最主要的的两件事就是。我们要调用xhr.open函数。

xhr.open("GET","index.php?option=com_guestbook&testAjax",true);

这里就是告诉ajax去controller.php文件中的testAjax函数中取得数据。

xhr.send(null);

这样就可以实现AJax效果了。

特别要注意 我们的testAjax函数是在主控制器controller.php中实现的。这个一定要弄清楚。

4,如何想Ajax处理函数传递参数呢?

直接在xhr.open("GET","index.php?option=com_guestbook&testAjax",true);

Index.php?option=com_guestbook&testAjax 后添加

例如:

Index.php?option=com_guestbook&testAjax&name=axiang

 

另外还要注意:在controll.php 中实现testAjax函数时,需要调用
$mainframe = & JFactory::getApplication();

you code here.........

echo $return;

$mainframe->close();

 

 

本文结束。希望对你有所帮助。

阅读 6236 次数 最后修改于 %18 %248 %2014 %12:%七 %PM