08年天:AJAX交互

以前在symfonyob娱乐下载

经过7个小时的工作,使用应用程序拥有先进。主页显示的问题,一个问题的细节显示其答案,用户个人资料页面,每个页面和专题列表可从侧边栏。我们co欧宝体育平台怎么样mmunity-enhanced FAQ是在正确的方向上(见行动提供的列表昨天),但用户无法改变现在的数据。

如果网络中数据操作的基础一直是形式,今天,AJAX技术和可用性增强可以改变应用程序的方式构建。这适用于使用。本教程将向您展示如何添加ajax增强交互使用。目标是允许注册用户声明其利益问题。

添加一个指示器的布局

虽然异步请求是等待,用户邮件服务商的网站没有任何的线索,是会考虑到他们的行动,结果很快就会显示出来。这就是为什么每一页包含AJAX交互应该能够显示一个活动的指标。

为此,添加的顶部<身体>全球layout.php:

< div id =“指标”风格=“显示:没有”> < / div >

虽然隐藏在默认情况下,这个问题< div >将显示一个AJAX请求时悬而未决。它是空的,但是main.css样式表(存储在使用/ web / css /目录)赋予它形状和内容:

div#指标{位置:绝对;宽度:100 px;高度:40像素;左:10 px;前:10 px;z - index:900年;背景:url(/遗留/图片/指标gif)没有重演00;}

添加一个AJAX交互申报利益

ajax交互是由三部分组成:一个调用者(一个链接,一个按钮或任何用户操作启动的控制动作),服务器行为,页面中显示的区域行动的结果给用户。

调用者

让我们回到显示的问题。如果你还记得第四天,一个问题可以显示在列表的问题和细节的问题。

这就是为什么这个问题的代码块被重构为一个标题和兴趣_interested_user.php片段。再次打开这个片段,添加一个链接,允许用户声明他们的兴趣:

< ? phpuse_helper(“用户”)? >< div类=“interested_mark”id =“mark_ < ?php echo $问题- > getId () ? > ">< ? php回声美元问题- >getInterestedUsers()? >< / div >< ? php回声link_to_user_interested(sf_user美元,美元问题)? >

这个链接将会做的更多,而不是仅仅重定向到另一个页面。事实上,如果用户已经宣布他/她的兴趣对一个给定的问题,他/她必须不能声明一遍。如果用户未被认证…以后我们会看到这种情况下。

链接写在一个helper函数,需要创建一个使用/应用程序/前端/ lib /帮助/ UserHelper.php:

< ? phpuse_helper(Javascript的);函数link_to_user_interested($ user,美元问题){如果($ user- >isAuthenticated()){美元感兴趣= InterestPeer::retrieveByPk(美元问题- >getId(),$ user- >getSubscriberId());如果(美元感兴趣){/ /已经感兴趣返回“感兴趣!”;}其他的{/ /还没有宣布的兴趣返回link_to_remote(“感兴趣?”,数组(“url”= >“用户/感兴趣? id =”。美元问题- >getId(),“更新”= >数组(“成功”= >“block_”。美元问题- >getId()),“加载”= >“Element.show(“指示器”)”,“完成”= >“Element.hide(“指示器”);“.visual_effect(“亮点”,“mark_”。美元问题- >getId()),));}}其他的{返回link_to(“感兴趣?”,“用户/登录”);}}? >

的link_to_remote ()函数的第一个组件是一个AJAX交互:调用者。它声明行动时,必须要求用户点击链接(在这里:用户/感兴趣),哪些页面的区域必须与行动的结果更新(这里:元素的idblock_XX)。两个事件处理程序(加载和完整的)添加和相关原型javascript函数。prototype库提供了非常方便的javascript工具应用视觉效果与简单的函数调用一个web页面。其惟一的缺点是缺乏文档,但来源很简单。欧宝官网下载app

我们选择使用一个辅助,而不是部分因为这个函数包含更多比HTML代码的PHP代码。

不要忘记添加idid = " block_ < ?php echo $问题- > getId () ? > "到问题/ _list片段。

< div类=“interested_block”id =“block_ < ?php echo $问题- > getId () ? > ">< ? phpinclude_partial(“interested_user”,数组(“问题”= >美元问题))? >< / div >

结果区域

的更新的属性link_to_remote ()javascript助手指定区域的结果。在这种情况下,的结果用户/感兴趣行动将取代的内容元素的idblock_XX。如果你困惑,看看集成的片段模板将呈现:

…< div类=“interested_block”id =“block_ < ?php echo $问题- > getId () ? > "> < !——在这里——>< ? phpuse_helper(“用户”)? >< div类=“interested_mark”id =“mark_ < ?php echo $问题- > getId () ? > ">< ? php回声美元问题- >getInterestedUsers()? >< / div >< ? php回声link_to_user_interested(sf_user美元,美元问题)? >< !————> < / div >…

结果区之间的部分是两个评论。的行动,一旦执行,将取代这些内容。

的利益第二id (mark_XX)是纯粹的视觉。的完整的事件处理程序的link_to_remote辅助凸显了interested_mark< div >点击感兴趣的…行动后返回一个递增的利息。

服务器操作

AJAX调用者指出用户/感兴趣行动。这个动作必须创建一个新的记录感兴趣当前的问题和当前用户的表。这是用symfony怎么做:ob娱乐下载

公共函数executeInterested(){这个美元- >问题= QuestionPeer::retrieveByPk(这个美元- >getRequestParameter(“id”));这个美元- >forward404Unless(这个美元- >问题);$ user=这个美元- >getUser()- >getSubscriber();美元利息=新感兴趣();美元利息- >setQuestion(这个美元- >问题);美元利息- >setUser($ user);美元利息- >保存();}

请记住,- >保存()的方法感兴趣对象被修改来增加interested_user相关的领域用户。所以感兴趣的用户对当前问题的数量将会奇迹般地增加屏幕上调用后的行动。

和应该得到的interestedSuccess.php显示模板吗?

< ? phpinclude_partial(“问题/ interested_user”,数组(“问题”= >美元问题))? >

它显示了_interested_user.php片段的问题模块。有书面的最大利益这个片段放在第一位。

我们还必须禁用布局模板(模块/ user / config / view.yml):

interestedSuccess: has_layout:

最后的测试

AJAX的开发利益现在已经结束了。你可以通过输入测试现有的登录名/密码在登录页面,显示质疑列表,然后点击“感兴趣吗?的链接。指标出现而请求传递给服务器。然后,这个数字在增加当服务器答案一大亮点。注意,最初的感兴趣吗?”链接现在是一个“感兴趣!我们的文本链接,谢谢link_to_user_interested助手:

如果你想要更多的例子使用AJAX的助手,你可以阅读拖放购物车教程,看相关的截屏视频或阅读相关的书一章。

添加一个内联“登录”的形式

我们以前说过,只有注册用户才能申报利益问题。这意味着,如果一个没有进行身份验证的用户点击一个“感兴趣吗?的链接,必须首先显示登录页面。

但是等待。为什么用户加载一个新页面登录,并且失去接触问题他/她申报利益?一个更好的主意是有一个登录表单动态页面上出现。这就是我们要做的。

添加一个隐藏的登录表单布局

打开(在全球布局使用/应用程序/前端/模板/ layout.php),加入(之间头和内容div):

< ? phpuse_helper(Javascript的)? >< div id =“登录”风格=“显示:没有”> < h2 >请先登录< / h2 >< ? php回声link_to_function(“取消”,visual_effect(“blind_up”,“登录”,数组(“持续时间”= >0.5)))? >< ? php回声form_tag(“用户/登录”,“id = loginform”)? >昵称:< ? php回声input_tag(“昵称”)? > < br / >密码:< ? php回声input_password_tag(“密码”)? > < br / >< ? php回声input_hidden_tag(“推荐人”,sf_params美元- >得到(“推荐人”)吗?sf_params美元- >得到(“推荐人”):sf_request美元- >getUri())? >< ? php回声submit_tag(“登录”)? >< /形式> < / div >

再一次,这种形式在默认情况下是隐藏的。的推荐人隐藏标记包含推荐人请求参数如果它存在,否则当前的URI。

的形式出现在一个没有进行身份验证的用户点击感兴趣的链接吗

你还记得用户辅助我们之前写了吗?现在我们将处理情况用户没有进行身份验证。重新开放的使用/ lib /帮助/ UserHelper.php文件和改变线:

返回link_to(“感兴趣?”,“用户/登录”);

这一个:

返回link_to_function(“感兴趣?”,visual_effect(“blind_down”,“登录”,数组(“持续时间”= >0.5)));

当用户没有被验证时,链接的感兴趣吗?“词启动一个javascript原型效应(blind_down),将揭示元素的id登录——这就是我们的形式添加到布局中。

登录用户

的用户/登录行动已经写在第五天,第六天期间和重构。我们需要再次修改它吗?

公共函数executeLogin(){如果(这个美元- >getRequest()- >getMethod()! = sfRequest::帖子){/ /显示表单这个美元- >getRequest()- >getParameterHolder()- >集(“推荐人”,这个美元- >getRequest()- >getReferer());返回sfView::成功;}其他的{/ /处理表单提交/ /重定向到最后一页返回这个美元- >重定向(这个美元- >getRequestParameter(“推荐人”,“@homepage”));}}

毕竟,没有。它完美地,推荐人的处理将用户重定向到的页面链接被点击时他/她。

现在测试AJAX功能。未注册用户将看到一个登录表单而无需离开当前页面。如果昵称与密码是公认的,页面将刷新和用户可以单击“感兴趣吗?之前他想点击的链接。

明天见

AJAX交互设计中最困难的事是正确定义调用者,服务器操作,结果区。一旦你知道他们,symfony的助手给你ob娱乐下载做休息。确保你理解它是如何工作的,看看我们如何实现相同的机制添加答案在第10章。这一次,AJAX行动称为用户/投票,_answer.php部分分成两部分(因此创建一个_vote_user.php部分),和两个帮手link_to_user_relevancy_up ()和link_to_user_relevancy_down ()创建的回答帮手。的用户模块还获得投票行动和voteSuccess.php模板。不要忘记设置布局从这个模板。

使用开始看起来像一个web 2.0应用程序。这仅仅是个开始:在几天内,我们将添加一些AJAX交互。明天我们将这个机会做一个综述symfony的MVC技术和实现外部库。ob娱乐下载

如果你遇到一个问题而试图跟随今天的教程,你仍然可以下载完整的代码release_day_8标记的来源使用SVN储存库。如果你没有任何问题,来使用论坛回答对方的问题。