jQuery:动态改变html表单的目标页(Target)

看到Rick Strahl的最新博客Changing an HTML Form’s Target with jQuery,读完之后感觉文中给出的解决方案很简单很实用。借鉴原文,断断续续重新整理小结一下,本文最后提供一个简单demo下载,希望对您也有帮助。

1、问题来源

“页面中有一个form,有些个submit按钮或者链接按钮需要点击后打开新页面。我们如何让这些个按钮将表单信息提交到正确的对应页面?”

这个问题看上去很简单。

熟悉asp.net开发的都应该很清楚,通过asp.net webform,我们可以对runat=”server”的form进行属性设置:

<form method="post" action="default.aspx" id="form1">

如你所知,method属性是http数据传输方法,action属性是要提交的目标页,至于打开新页面,设置target为_blank即可。

对于通常的页面交互,一个或多个按钮提交一个相同的表单这样做没有问题,可是如果按钮需要post的页面不尽相同,这个方法就显得无能为力。因为这种解决方法是“全局”的,设置一次,影响所有表单提交元素。

2、runat=server的form

到这里,也许有人会“幸灾乐祸”地说这都是web form的form机制不好,一个页面只能有一个runat=server的form。我们完全可以在一个页面中多定义几个form,对于不同的提交按钮,我们给它设置不同的form(即分割提交按钮到不同的表单),这样不就解决问题了吗(新浪、网易和搜狐等很多页面,打开一个网页并查看源码可以看到很多form,我估计都是这么用的)?

但是,这不是web form独有的“错”,其他开发框架也有类似问题:

Although this discussion uses ASP.NET WebForms as an example, realistically this is a general HTML problem although likely more common in WebForms due to the single form metaphor it uses. In ASP.NET MVC for example you'd have more options by breaking out each button into separate forms with its own distinct target tag. However, even with that option it's not always possible to break up forms - for example if multiple targets are required but all targets require the same form data to the be posted.

原文的评论中一个哥们回复说:

“Good post, as always, but have you noticed that literally everything you want to do with webforms requires a hack or workaround? It's always some rudimentary thing that is easy to do in any other web platform or framework, but the webforms abstraction always rears it's ugly head. Bleh, the further I get away from webforms, the more productive I have become.

”ugly“一词用的真是形象且险恶。好在Rick及时回复说:

# re: Changing an HTML Form's Target with jQuery
by Rick StrahlFebruary 03, 2011 @ 12:00 am @Jeff - this isn't specific to WebForms as I pointed out at the top of the page. The same applies to MVC or any other framework that has multiple POSTable options for submission. Admittedly, with WebForms your options are more limited as you can't easily add additional forms, but when you need to submit form variables to multiple target actions there are no choices regardless of platform...

还有,我感觉回复者Jeff这个名字挺有喜感的。

3、简单实用的解决方案

(1)、直接使用linkbutton或者链接控件?

通常情况下,我们很容易想到用现成的link控件的属性来实现页面提交。比如LinkButton吧:

  <asp:LinkButton runat="server" ID="btnNewTarget" Text="New Target" target="_blank"  OnClick="bnNewTarget_Click" />

虽然LinkButton没有Target属性,但是像上面那样设置也没有问题。

但是,最怕的就是这个但是。在查看生成的html源码的时候:

<a id="btnNewTarget" target="_blank"    href="javascript:__doPostBack(&#39;btnNewTarget&#39;,&#39;&#39;)">New Target</a>

我们发现生成的html源码里a元素的href属性已经被设置了一段让人眼熟的控制回发脚本。就是这一段脚本,让我们提交数据到新窗口的目的落空。为什么呢?

What happens with a target tag is that before the JavaScript actually executes a new window is opened and the focus shifts to the new window. The new window of course is empty and has no __doPostBack() function nor access to the old document. So when you click the link a new window opens but the window remains blank without content - no server postback actually occurs.

原文解释的还算清楚简单,good,fabulous,excellect…词穷。

(2)、为这些个按钮设置form的Target吧!

通过下面的脚本,可以轻松实现我们的预定功能:

    $("#btnButtonNewTarget,#btnNewTarget").click(function () {$("form").attr("target", "_blank");});

对于同一个页面post(示例中是default.aspx页面),它和(1)的效果截然不同。可能您习惯要问为什么,原文是这样解释的:

So why does this work where the target attribute did not? The difference here is that the script fires BEFORE the target is changed to the new window. When you put a target attribute on a link or form the target is changed as the very first thing before the link actually executes. IOW, the link literally executes in the new window when it's done this way.
By attaching a click handler, though we're not navigating yet so all the operations the script code performs (ie. __doPostBack()) and the collection of Form variables to post to the server all occurs in the current page. By changing the target from within script code the target change fires as part of the form submission process which means it runs in the correct context of the current page. IOW - the input for the POST is from the current page, but the output is routed to a new window/frame. Just what we want in this scenario.

看原文这里可能有点绕人,解释太多,有点抓不住重点。我认为关键要理解原文中的“表单提交进程(form submission process)”。点击按钮的时候,在当前页面通过脚本改变表单的Target,这只是表单提交进程的一部分(By changing the target from within script code the target change fires as part of the form submission process)。

那么真正的“表单提交进程”发生了什么呢?顺着原文的意思,看上去好像是新页面打开,前一页的表单数据提交到新打开的页面,貌似是前一页(current page)的_doPostPack函数“跳”到当前新打开的页面(也叫current page)触发ClickHandler……不就是“current page”的置换吗?可能我自己的理解现在还有偏差,英语水平下降得令人抓狂,必须要补补了。如果您有更合适的好理解的解释说明,请不吝赐教。

多说一句,点击前一个页面,在新打开的页面触发事件。我kao,这多像江湖中传说已久的乾坤大挪移啊?

By the way,我们还可以在不同的新页面中post传参,您可以将demo中的Default页面的form的action设置为“TargetPage.aspx”试一下。其实我自己在开发中也曾经碰到过Rick文中所述的类似问题。我的解决方法通常都是对于某一个按钮,直接通过javascript写个函数:先找到要操作的form,修改action,然后调用form的submit方法打开新窗口,真不如Rick原文中的来得简洁。

demo下载:SimpleWebApp

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/405539.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

花卉网页html,花卉管理系统(数据库+源码)

这是一个入门级示例&#xff0c;实现了花卉的 增加 和 查询功能资源下载此资源下载价格为2D币&#xff0c;请先登录资源文件列表花卉管理系统/FlowerManagerSys/.vs/FlowerManagerSys/v15/.suo , 53248花卉管理系统/FlowerManagerSys/.vs/FlowerManagerSys/v15/Server/sqlite3/…

Qt sqlit3的增、删、改、查、判断等基本操作接口

1、Qt sqlit3简介 Qt SQLite&#xff08;sql&#xff09;是一款不需要服务器的开源轻量级的数据库软件&#xff0c;可以集成在其他软件中&#xff0c;适合嵌入式系统应用。Qt5以上版本直接支持SQLite。具体的特性和语法可以参考RUNOOB. 这里我把自己项目中用到的基本操作函数贴…

ECNUOJ 2143 端午节快乐

端午节快乐 Time Limit:1000MS Memory Limit:65536KBTotal Submit:1720 Accepted:868 Description 有一段有趣的传说。公元前340年&#xff0c;爱国诗人、楚国大夫屈原&#xff0c;面临亡国之痛&#xff0c;于五月五日&#xff0c;悲愤地怀抱大石投汩罗江&#xff0c;为了不使鱼…

Linux下通过命令设置系统时间

Linux下通过命令设置系统时间&#xff1a; date -s "09/22/2012 09:30:30" clock -w

教你看编号选希捷硬盘

对于大部分消费者而言&#xff0c;很多人在选购硬盘时&#xff0c;都会把注意力集中在硬盘的容量上&#xff0c;而近期一些用户也会注意到硬盘的接口&#xff08;IDE或者是SATA&#xff09;等方面&#xff0c;但是&#xff0c;硬盘的性能并不仅仅表示在容量以及接口上&#xff…

一键圣诞帽 html5源码,HTML5在线教程之微信小程序“圣诞帽”的实现思路详解

HTML5在线教程之微信小程序“圣诞帽”的实现思路详解大家应该还记得微信小程序“圣诞帽”吧&#xff0c;在圣诞的那几天可谓是非常的火爆&#xff0c;大家都争相使用&#xff0c;本篇文章小编给大家分享一下微信小程序“圣诞帽”的实现思路详解&#xff0c;对此感兴趣的小伙伴随…

STM32 应用程序加密的一种设计方案

0、前言 STM32编译后的代码存在FLASH中&#xff0c;通过外部工具可以读出来全部数据&#xff0c;一旦硬件抄板一样&#xff0c;再将FLASH数据全部拷贝至抄板单片机中&#xff0c;既可以完全实现硬件和软件功能抄袭。因此&#xff0c;需要对自己的应用程序加密&#xff0c;即使…

使用HTML5实现刮刮卡效果

http://www.helloweba.com/view-blog-270.html转载于:https://www.cnblogs.com/wln3344/p/4618226.html

两块网卡实现多台机器共享上网

组建局域网内部网络&#xff0c;遇到的问题&#xff1a;购买电信的宽带&#xff0c;多人拨号肯定是不行的(貌似同时超过4台机器拨一个号就自动被断开网络了)。 使用一些软件共享上网觉得既然是人家开发的软件&#xff0c;不太放心里面加了什么代码会监控这边的网络&#xff0c;…

mount: unknown filesystem type 'LVM2_member'解决方案

From: http://hi.baidu.com/williwill/item/7a36fdd92340b2ee55347f13 系统启动到request_module: runaway loop modprobe binfmt-464c挂起 利用U盘系统&#xff0c;挂载硬盘出现&#xff1a;mount: unknown filesystem type LVM2_member 解决办法&#xff1a; 需要安装 lvm2:…

计算机专业英语的题目,计算机专业英语题目

比较题1.SRAM and DRAM*RAM is short for random access memory.Static RAM(SRAM) keeps data in the main memory,without frequent refreshing,for as long as power is supplied to the cicuit. SRAM is very fast but it is much more expensive than DRAM and takes more …

HC-05蓝牙模块的配置和使用方法

一、说明 蓝牙传输模块一般通过串口进行通信&#xff0c;即RS232&#xff08;设备1&#xff09;<—>蓝牙模块<—>蓝牙模块<—>RS232&#xff08;设备2&#xff09;。因此&#xff0c;使用蓝牙模块需要配置的参数有串口通信参数和蓝牙通信参数。HC05蓝牙模块…

Anton Chuvakin:关于日志管理产品的十个注意事项

SecurityWarrior Consulting的Anton Chuvakin博士在去年底的时候写过一篇文章&#xff1a;Top 10 Things Your Log Management Vendor Won’t Tell You&#xff0c;很有意思。实际上&#xff0c;他提醒用户在选择日志审计产品&#xff0c;尤其是用它来做内控的目的的时候应该注…

zlib库compress和uncompress函数的使用方法

From: http://blog.csdn.net/turingo/article/details/8148264 zlib(http://zlib.net/)提供了简洁高效的In-Memory数据压缩和解压缩系列API函数&#xff0c;很多应用都会用到这个库&#xff0c;其中compress和uncompress函数是最基本也是最常用的。不过很奇怪的是&#xff0c;…

Python字符串的encode与decode研究心得乱码问题解决方法

Python字符串的encode与decode研究心得乱码问题解决方法 为什么Python使用过程中会出现各式各样的乱码问题&#xff0c;明明是中文字符却显示成“\xe4\xb8\xad\xe6\x96\x87”的形式&#xff1f; 为什么会报错“UnicodeEncodeError: ascii codec cant encode characters in posi…

嵌入式开发中关键字_IO 和 volatile的用法

一、描述 在开发嵌入式过程中&#xff0c;常会看到_IO 修饰符&#xff0c;这两个修饰符是在Core_cm3.h中被重定义&#xff1a; /* IO definitions (access restrictions to peripheral registers) */ #ifdef __cplusplus#define __I volatile /*!< defi…