`
clark1231
  • 浏览: 255359 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

使用link_to跳转到一个新的窗口

阅读更多

情况大概是我需要在Controller中处理一段URL,然后让用户在新窗口中打开这个URL

但我知道redirect_to本身只是回传302,从而让浏览器打开新的地址,但是没办法在新的窗口中打开

Google了一下,在Stackoverflow看到可以这样:

view:

<%= link_to "Buy this product", buy_path, :target=> "_blank" %>

controller:

def buy
  ...
  redirect_to link
end

大概意思就是让用户redirect到view中的一个地址上,然后再从那个地址上用_blank打开一个新窗口

还有一种方法:

link_to "xx",xx_path,:popup => true

 

Rails中的link_to方法注意点

转自:http://www.blogjava.net/pengpenglin/archive/2010/05/17/321193.html 

link_to是Rails中提供的一个内置方法,用于产生一个超链接,常用的方法通常是link_to "链接文字", options = {}, html_options = {}, 如果我们不指定提交的方法,默认情况下将产生一个HTTP GET请求,但是我们也可以通过指定提交方法来避免某些敏感数据的泄漏。 

在《Agile web development with Rails》一书中,有这样一个练习题:为购物网站上面的图片添加一个超链接,当点击该图片时请求名为store的controller下add_to_cart action,同时要求使用POST方式来请求。代码如下所示: 

<%= link_to image_tag(product.image_url),  options = {:action => "add_to_cart"},  html_options={:method => "post"} %> 

其中第一个参数image_tag是一个内置方法,用于产生一个的HTML标签,而options接受一个hash容器,在这个容器中只有一个参数action,它告诉了请求对应的action,于是rails会在构建<a>表情的href属性时将其转换为:http:localhost:3000/store/add_to_cart 这种形式:即请求StoreController下的add_to_cart方法。最重要的一定是html_options参数,它也接受一个hash容器,通过method="post"来告诉浏览器,采用post方式来提交请求。 

但是我们知道post通常是在form中才用到的,这里并没有form的定义,那么是如何采用post方式来进行提交的呢?通过阅读浏览器解析后的源代码,我们可以发现rails在编译期间做了很巧妙的处理:它创建了一个动态的、隐藏的表单来提交: 

[url=/store/add_to_cart]<img alt="Auto" src="/images/auto.jpg?1265130093" />[/url] 

下面就是onClick的内容: 

  //创建一个隐式的表单对象,并设置提交方式为POST,已经设置提交的URL
  var f = document.createElement('form');  
  f.style.display = 'none'; 
  this.parentNode.appendChild(f); 
  f.method = 'POST'; 
  f.action = this.href;

  //为表单添加一个隐藏域,指定提交的方式参数
  var m = document.createElement('input'); 
  m.setAttribute('type', 'hidden'); 
  m.setAttribute('name', '_method'); 
  m.setAttribute('value', 'post');
  f.appendChild(m);
  
  //为表单添加一个隐藏域,指定当前的Session token key,防止重复提交
  var s = document.createElement('input'); 
  s.setAttribute('type', 'hidden'); 
  s.setAttribute('name', 'authenticity_token'); 
  s.setAttribute('value', '6c02dccc61c8e299bf1765bd0414355e9d8a4815'); 
  f.appendChild(s);
  
  //动态提交表单
  f.submit();
  
  return false;"
}

这就是采用post方式提交请求的“秘密”,rails的实现相当优雅!可是如果我们把上面的link_to代码稍微改一下,如下面所示,会有什么结果呢? 

<%= link_to image_tag(product.image_url),  {:action => "add_to_cart", :method => "post"} %>

我们来看看最终产生的页面源代码 

[url=/store/add_to_cart?method=post]<img alt="Auto" src="/images/auto.jpg?1265130093" />[/url]

很明显,method=post变成了URL的请求参数,而不是HTTP 请求报头了。也就是说这里产生的是一个HTTP GET请求:http://localhost:3000/store/add_to_cart?method=post,而正确的请求应该是:http://localhost:3000/store/add_to_cart 

所以我们一定要记住:options={}是用来传递请求参数的,而html_options={}是用来设置请求报头的,不能搞混!

分享到:
评论

相关推荐

    vue跳转方式(打开新页面)及传参操作示例

    本文实例讲述了vue跳转方式(打开新页面)及传参操作。分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 &lt;router to=/detail/one&gt; &lt;span class=spanfour&gt;link跳转 // 添加参数 ...

    vue router 跳转时打开新页面的示例方法

    记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1、标签实现新窗口打开 官方文档中说 v-link 指令被 &lt;router&gt; 组件指令替代,且 &lt;router&gt; 不支持 target=_blank ...

    vue-router跳转时打开新页面的两种方法

    记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1、标签实现新窗口打开 官方文档中说 v-link 指令被 &lt;router&gt; 组件指令替代,且 &lt;router&gt; 不支持 target=”_blank...

    Nuxt.js的路由跳转操作(页面跳转nuxt-link)

    路由跳转代码如下: &lt;li&gt;&lt;nuxt to={name:&gt;HOME page&lt;/nuxt&gt;&lt;/li&gt; &lt;li&gt;&lt;nuxt to={name:&gt;NEWS page&lt;/nuxt&gt;&lt;/li&gt; &lt;li&gt;&lt;nuxt to={name:&gt;PLAY page&lt;/nuxt&gt;&lt;/li&gt; 注意说明: to 前面有冒号“ : ” to 后面跟的是路径...

    js跳转问题解决方式

    在JavaScript(JS)中,页面跳转是一种常见的操作,它涉及到网页内容的更新或导航到新的URL。在处理JS跳转问题时,我们通常会遇到几种常见情况,如使用`window.location`对象、`location.href`、`a`标签的`onclick`...

    用jquery实现打开自定义窗口

    在这个示例中,`$("#openLink")`选择了一个链接元素,当用户点击链接时,`event.preventDefault()`防止浏览器默认的跳转行为,然后`window.open()`打开指定的网页。 关于“被打开页面编码应设置为:utf-8”,这是...

    Vue项目页面跳转时浏览器窗口上方显示进度条功能

    在Vue项目中,为了提升用户体验,我们经常需要在页面跳转时显示浏览器窗口上方的进度条,以指示页面加载状态。这种功能可以帮助用户感知页面正在加载,减少他们因等待而产生的不耐烦感。实现这一功能,我们可以借助...

    Python实现京东秒杀功能代码

    对于用户而言,如何在众多的竞争者中抢购到心仪的商品成为了一个挑战。本文将详细介绍如何使用Python编程语言结合Selenium库来实现自动化的京东秒杀脚本,帮助用户更高效地参与秒杀活动。 #### 二、环境搭建与依赖...

    python+selenium+chrome 自动化测试TPshop商城项目实战(二)——通过cookies绕过验证码.pdf

    之后,点击“加入购物车”按钮,这一步可能触发了一个提示框,通过`switch_to.alert`来处理这个弹窗并接受它。 最后,实战中还展示了如何跳转到购物车页面进行结算。这里通过查找提示框的class名称,切换到相应的...

    lightbox的使用+实例

    Lightbox是一种流行的网页图片展示技术,它允许用户在当前页面上弹出一个半透明的窗口来查看大图,而不需要跳转到新的页面或者打开新窗口。这种技术极大地提升了用户体验,因为它使得用户可以轻松地浏览一系列图片,...

    dreamweaver的各种组件

    Open full screen window 打开一个新的全屏幕的窗口 printcrossbrowser 弹出打印对话框 Audioembed 可以嵌入midi文件并设置为循环播放 Background_that_fit 不论怎样缩放窗口背景图片总是和窗口一样大 Base...

    【JavaScript源代码】Vue单页面应用中实现Markdown渲染.docx

    Vue.js 是一个流行的前端框架,用于构建用户界面,特别是单页面应用程序(SPA)。在 Vue 应用中,Markdown 渲染是一项常见的需求,它允许用户输入Markdown格式的文字,然后在前端将其转换为HTML,以便在网页上展示。...

    浏览器对象BOM.ppt

    浏览器对象模型(BOM,Browser Object Model)是Web开发中的一种特性,自IE3和Netscape Navigator 3以来被广泛使用。BOM的核心在于它允许开发者通过JavaScript对浏览器窗口进行访问和操作,超越了HTML文档本身的内容...

    source_insight_training.docx

    4. 如果你尚未为Ada文件创建文件类型,你需要新建一个。在列表中选择已有的文件类型,如果没有,跳到步骤5。 5. 点击“Add Type”按钮创建新文件类型。为文件类型命名,例如“Ada Source”。点击“OK”,然后在文件...

    Javascript效果总结(包含绝大多数Javascript效果和常用的Javascript功能)

    在不知道用户是从哪个页面跳转而来时,可以使用`history.back()`函数,它会将用户带到访问历史中的前一个页面。通过`&lt;a&gt;`标签的`onClick`事件绑定此函数,用户点击即可返回。 2. **文字横向滚动**: `marquee`...

    vue-element-template实战案例

    - **路由跳转**: 菜单项点击后,可以通过 `&lt;app-link&gt;` 组件实现页面跳转,这里 `app-link` 是自定义的一个用于处理路由跳转的组件。 - **用户信息展示**: 通过 `&lt;el-dropdown&gt;` 实现了一个带有头像的下拉菜单,用于...

    VC Studio 使用技巧大全

    VC Studio 是一款强大的集成开发环境,尤其对于C++开发者来说,掌握其使用技巧能显著提高编程效率。以下是一些实用的技巧: 1. **括号匹配**:通过快捷键“Ctrl+]”可以快速检查括号匹配情况。如果匹配正确,光标...

Global site tag (gtag.js) - Google Analytics