生活在远方 » ajax

Going for Symfony | 第五天

tr — Wed, 18 Feb 2009 14:32:31 +0000

今天忙里偷闲，继续对我的藏书管理程序进行Symfony的改造。界面效果如下：

首先，当然是routying.yml的编辑：

   book_list:
     url: /books/search
     class: sfPropelRoute
     options:
       model: BookBook
       type: object
     param:
       module: books
       action: search

然后是在action.class.php中加入对search动作的处理：

    public function executeSearch(sfWebRequest $request)
    {
        $this->pager=new sfPropelPager('BookBook', sfConfig::get('app_records_on_book_search'));
        $this->pager->setPage($request->getParameter('p',1));
        $this->pager->init();
    }

这个函数中用到的分页处理是标准的Symfony处理方式。对pager的进一步处理都将在具体的模板中处理–我个人认为这个不是最好的方法，不过貌似也没有更好的方法了：

 slot('title', '任氏有无轩：书籍列表') ?>
 include_partial('books/list', array('books'=>$pager->getResults())) ?>
 if($pager->haveToPaginate()): ?>

     echo url_for('book_list')?>?p=1">
    
    
     url_for('book_list')?>?p= echo $pager->getPreviousPage() ?>">
    
    
     
    foreach ($pager->getLinks() as $page)
    {
        if($page==$pager->getPage())
        {
            echo $page;
        }
        else
        {
            ?>
             echo url_for('book_list')?>?p= echo $page ?>"> echo $page ?>
            
        }
    }
    ?>
     url_for('book_list')?>?p= echo $pager->getNextPage() ?>">
    
    
     url_for('book_list')?>?p= echo $pager->getLastPage() ?>">
    
    

 endif; ?>

这里的处理无非是将结果集提出来，然后根据目前的页数设置不同的图标的链接。这里我也用到了include_partial来包含另一个模板，在那个模板中当然只是简单的循环显示书籍的信息而已。

有一个小问题，在_list.php中，我首先是对奇偶行进行不同CSS类的设置，同时用jQuery对mouseover/mouseout进行处理：

    $(".list_cs_a").mouseover(
    function(event)
    {
        $(this).removeClass("list_cs_a");
        $(this).addClass("a_over");
    }).mouseout(
    function(event)
    {
        $(this).removeClass("a_over");
        $(this).addClass("list_cs_a");
    }
    );

在编写这个函数时，一开始我犯了经验主义的错误，我认为一旦我addClass后，原来的$()选择子将无法进行：因为该DOM元素的CSS类变化了，而我正是根据CSS类来进行选择的呀……但是，事实证明，我这样写是对的。显然，在选择后对象已经生成了，此时改变对象的属性并不能改变对象本身……

Technorati : ajax, jquery, symfony, 分页
Del.icio.us : ajax, jquery, symfony, 分页
Zooomr : ajax, jquery, symfony, 分页
Flickr : ajax, jquery, symfony, 分页

【jQuery】示例4：三层的关联下拉框

tr — Sun, 14 Dec 2008 09:08:44 +0000

有了两层关联下拉框的经验，实现三层的关联下拉框确实很容易。

当然，为了被前令狐同学再次BS我的算法BT，我首先改写了clearOptions函数：

function clearOptions(selectID)
{
    var sel=document.getElementById(selectID);
    var len=sel.length;
    var i;
 
    for(i=1;i<len;i++)
        sel.remove(1); // I keep on removing the 1st item in the select!
}

说明一下，我这样编程是有一定的道理的。虽然说，更“好”的代码应该似乎是每次都删除最后一个（类似：remove(sel.length)）。但是，由于每次删除后，sel.length都会发生变化，所以在每次删除最后一个的时候，sel.length都会被重新取值，这个对于jQuery来说开销还是很大的，特别是如果select下的option比较多的时候。所以，我还是选择每次删除第一个的做法。这样，remove(1)中的参数是个常量，只需要取值一次从而大大的缩减了运行时间。

同时我将addOption，fillLevel等多次调用的代码段抽出作为独立的函数。在fillLevel函数中，还特意混合了jQuery和标准javascript。

这样一来，jQuery的ready函数写法就更清晰明了了。同时，为了温故知新，我还加入了在第二个例子中实现的“Loading”提示。目前的问题时，在填充level1的时候，不会出现这个提示，而只有在填充level2和level3的时候才出现这个提示。暂时不管这个小小的问题了。

完整的示范在此处。

代码不再贴出，有兴趣的可以在页面自行下载研究。

【jQuery】示例3：两层的关联下拉框

tr — Wed, 10 Dec 2008 14:17:50 +0000

今天终于完成了jQuery的一个确实有用的示例：两层的关联下拉框（2 Level Cascading Dropdown list）。示例见此处。开始，我以为很简单。但是经过实战，还是有一些些小的技巧需要注意。 JSON的返回值是一个问题。在这个示例中，由于我并不关注返回值的问题（这个问题将在示例4中进一步研究），所以我只是简单返回一个字符串的数组。我遇到的第二个问题，是如何给select加option的问题。开始我用如下的代码：

var opt=document.createElement("option");
opt.value=n;
opt.text=i;
 
$("select").filter("#level1").append(opt);

这样做，在Fx下是可以了，但是在IE下不行：option加入正常，但是没有文本显示。所以，我采用更标准的JavaScript写法：

var opt=new Option("Option "+i, n);
document.getElementById("level2").options.add(opt);

于是，Fx和IE都正常了……世界终于清净了…… 还没有完。每次我点击或者在level1中更改选项时，level1和level2都会不断的增加option，我需要在增加之前将原来的option进行清除。于是我再次借用标准的JavaScript：

function clearOption(selectID)
  {
      var obj;
      obj=document.getElementById(selectID);
      var i;
      for(i=1;i<obj.length;i++)
      {
        obj.remove(i);
        i--;
      }
  }

这里有一些技巧。我故意用一种比较笨的方法：从1（不是0，因为从0开始会把那个—的选项一起删除了）开始循环到options数组的长度。但是由于每次删除一个选项后，长度就会减1，且原来1的项目删除后，原来2的项目变成了1，所以，我必须用i–将i缩小一次。更好的方法是从最后一个元素开始删除，每次也只删除最后一个元素。有兴趣的可以自己完成。这个代码是我在NetBeans IDE下完成的。它对jQuery支持的很好，有jQuery的代码提示，省去我遍寻API的烦恼。

【jQuery】示例2：显示一个“Loading”提示

tr — Tue, 02 Dec 2008 12:42:07 +0000

今天完成了一个在进行耗时长久的操作时，为了不让用户感到无聊而显示一个“载入中，请稍安勿躁”之类提示的小例子。

演示地址：此处。

==============

为了使这个“耗时长久”的操作显得真实一些，我决定让我的jQuery通过ajax去调用一个PHP文件，并从PHP文件那里返回一些东西。当然，这只是一个demo，PHP文件不用太复杂：

$t=rand(3,6);
sleep($t);
$arr=array("t"=>$t, "foo"=>"bar");
$jarr=json_encode($arr);
echo $jarr;

值得注意的有两点：

第一，在返回到jQuery之前，我先用PHP函数json_encode将要返回的东西进行JSON编码。JSON是很通用的编码规范，jQuery、PHP都支持；

第二，返回需要用到的不是return，而是echo。这个很特别。我开始用的是return，然后在jQuery中死活得不到返回的数据流。

核心的jQuery代码是：

	var time_elapsed;
	var action;
$(document).ready(
 
	function()
	{
		$("a").filter("#long").click(
			function(event)
			{
				event.preventDefault();
				$.getJSON("ajaxcall.php", function(json)
					{
						time_elapsed=json.t;
						action=json.foo;
					}
				);
			}
		);
 
		$("div").filter("#div01").ajaxStart(
			function()
			{
				$(this).slideDown("slow");
			}
		).ajaxComplete(
			function()
			{
				alert("本次"+action+"的操作耗时"+time_elapsed+"秒。");
				$(this).fadeOut("slow");
			}
		);
	}
);

这里需要注意三点：

第一，变量的说明要在所有函数体之外，类似全局变量。虽然使用全局变量不好，但是在这样小规模的代码段中，也是可以接受的；

第二，请注意获得json数据流中变量的方法。由于在PHP中我是用JSON编码我的返回值，所以我必须用getJSON去调用PHP文件，从而获得数据。同时，可以注意到，经由getJSON得到的数据已经变成了一个对象数组，我可以用json.t，json.foo这样很直观的方法来获取返回值。

第三，请注意ajax调用和针对ajax调用时状态处理函数的声明。ajax的调用必须用$.getJSON的方式；而ajax调用状态中最重要的就是ajaxStart和ajaxComplete。

So far, so good.

Delphi & Ajax

tr — Fri, 10 Aug 2007 08:51:10 +0000

今天听了Gordon关于Delphi & Ajax的在线讲座。

从他老人家那里要来了PPT文件，不敢私藏，与诸位分享。

下载：单击此处。