如何jquery 提交表单如何阻止submit 页面提交?

收藏,2.5k 浏览
问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
之前是用jQuery的post()方法实现向服务器POST数据.
现在新需求需要呈现服务器返回的HTML页面.这个呈现是类似于普通form提交后跳转的过程.
使用表单进行POST的方法
&form method="post" action="/B"&
&input type="hidden"
name="foo" value="bar"&
&button type='submit'&
点击Submit 就可以向"/B"POST数据并跳转到B页面
$.post("/B",{"foo":"bar"})
这种方法能够POST自定义数据但是不能够跳转到B页面
现在的需求:
用JavaScript 控制POST的数据内容并跳转到B页面,类似ExtJS的standardSubmit功能
需求决定我们不能在页面上使用form来提交数据.因为提交的数据是页面上几个Div的全部HTML内容(实际上是富文本编辑器).使用jQuery的.html()方法取得这些HTML内容.
现在想到的思路是使用jQuery 在内存中建立一个form对象,然后调用这个对象的submit方法
form = $("
&form method='post' action='foo'&&/form&
str = $("#bar").html()
input = $("&input type='text'&").val(str).attr('name','bar')
form.append(input)
//....继续添加字段
form.submit()
上面这种方法虽然能用,但是感觉很丑,有没有更好的方法?
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
4月17日 回答
.....你们确定看过的手册了么
$.post(url, {bar: $('#bar').html(), any: $('#any').html()}, function(response) {});
第二个参数就是发送的数据啊,可以直接用对象发送的好么....
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
4月18日 回答
问题描述的比较模糊(改了一遍之后仍然模糊)。模糊中给给解决方案,看一下行不行。
在 A 页面,向 B 页面发起 POST 请求,收到服务器返回的 data,带着 data 跳转到 B 页面,在 B 页面呈现 data?
拿到 A 页面要提交的数据,用 base64 编码。
向 B 页面发起 POST 请求,把 base64 编码后的数据传过去。
服务端返回数据为 data,data 必须是 base64 编码后的。
带着 data 跳转到 B 页面,URL 传参。
B 页面的 javascript 通过 URL 取值,base64 解码,呈现。
既然是做真正的跳转,那肯定要把数据带过去,要不然是没法呈现服务器返回的数据的。至于怎么发请求,具体用哪个格式( blob 还是 base64),你再自己选择试试。
希望有用。
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
4月18日 回答
不太明白。。
var parm = $("#BiddingRoomForm").serialize();
$.post(url, parm, function (response) {
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
4月19日 回答
找了两天解决方法,自问自答.
基本就是题目描述中的方式,定义一个函数,这样就是丑了点,但是完全符合需求.
function StandardPost (url,args)
var form = $("&form method='post'&&/form&");
form.attr({"action":url});
for (arg in args)
var input = $("&input type='hidden'&");
input.attr({"name":arg});
input.val(args[arg]);
form.append(input);
form.submit();
方案二会获取服务器返回并呈现.但是在有很多缺陷,比如在Chrome会被认为是弹出窗口而拦截,而且不能控制目标的window.location
function post_and_open(url,args)
$.post(url,args,function(response){
var obj = window.open("about:blank","_blank");
obj.document.write(response);
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
4月20日 回答
yourform.on("submit",function(e){
//change or validate the form here
return true // to submit
//return false // to prevent submit
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
4月20日 回答
不太明白,callback里面用Js跳过去不可以么?
回答,投票,评论
第三方账号登录,无需注册,即刻开始
举报理由:
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复
内容质量差,或不适合在本网站出现
答非所问,不符合答题要求
其他原因(请补充说明)
补充说明:IE6中Form.submit不提交的问题-Jquery也不行 - 推酷
IE6中Form.submit不提交的问题-Jquery也不行
已收藏到推刊!
请填写推刊名
描述不能大于100个字符!
权限设置: 公开
仅自己可见
今天发现jquery的表单不能提交,而且只在ie6下有这个问题。
参考网上的一些资料,还是不行,最后看了看
任何事情,还是得了解原理啊,否则,稍有变化,就玩不转了。
本篇又进行了更新和总结。
页面是用JavaScript准备数据填写Form然后提交。然而,在IE6下通过JavaScript提交数据时页面没有反应(也没有提示)!?奇怪的是,在FireFox/Opera下面一切正常。
首先:接到BUG后,先在测试机上重现了BUG,了解测试人员的操作步骤,然后在研发的机子上重现BUG。
其次:对BUG进行了跟踪。
起初认为是程序的那个地方有逻辑错误,检查代码无误。尝试用多种浏览器测试,发现在IE7/8、FireFox、Opera、360浏览器下正常,唯独IE6下不正常,&所以排除了逻辑错误这个原因;
上网搜索发现IE6下如果是用&input type=&submit&/&按钮,则能正常提交数据,若是通过JavaScript脚本:formElement.submit(),则会提交失败,网上提出了使用setTimeout()的办法来解决;
进一步深入发现,&&a/&有个链接属性&href&,&而form也有一个页面请求属性&action,&当两属性同时存在时,&点击&a/&当然会优先&a/&的href链接,但如果是&&a href=&javascript:;& &&/a&,&又会是什么情况呢?&实践证明IE7.0+ , FF3.0+, Opera9.6+&均能正确处理,&忽略&a/&的href,&执行表单的submit动作,&
唯有&IE6&仍坚持着自己的原则,&只要有href ,&就只尝试执行链接&href
,&除非你的&a/&标签中去掉&href属性,&但去掉&href&你将发现IE&下将不会出现下划线;看来是因为&ie6&执行默认动作引起的。
小结问题:
&a href=&javascript:void(0)& onclick=&method_xxx()&/&
其他浏览器,如果在method_xxx()中提交了表单,则表单可以提交,不在执行href。
但在ie6中,先执行method_xxx(),即使是method_xxx中提交了表单,依然执行href的语句
目前解决方法:
第一种方法:去掉a标签的href属性:
&class=&bt_3&&&style=&cursor:&&id=&btnSubmit1&&onclick=&submitPage()&
这种方法根本没有href属性,用style=&cursor:&&产生手型图标来模拟。
第二种方法:在onclick中返回false,阻止执行href
&class=&bt_3&&&&href=&javascript:void(0)&&&id=&btnSubmit1&&onclick=&submitPage();
onclick&返回&false ,阻止浏览器的默认行为。也可以达到相同的目的
第三种方法:不用onclick,直接执行href(本人想的哦,而且实验过了)
&a href=&javascript:
method_xxx()
这3个方法,够用了的,亲们,要优先明白原理哦。
已发表评论数()
&&登&&&陆&&温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!&&|&&
LOFTER精选
阅读(784)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
id:'fks_',
blogTitle:'【转】jQuery验证阻止表单提交',
blogAbstract:'&html& &&head& &&meta&http-equiv=\"Content-Type\"&content=\"text/&charset=gbk\"& &&script&type=\"text/javascript\"&src=\"/sunchis/script/jquery-1.3.2.js\"&&/script& &&script&type=\"text/javascript\"& &$(document).ready(function',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:1,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人:
{list a as x}
{if !!b&&b.length>0}
他们还推荐了:
{list b as y}
转载记录:
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}jQuery 事件 - submit() 方法
jQuery 事件 - submit() 方法
当提交表单时,显示警告框:
$(&form&).submit(function(e){
alert(&Submitted&);
定义和用法
当提交表单时,会发生 submit 事件。
该事件只适用于表单元素。
submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。
触发 submit 事件
$(selector).submit()
将函数绑定到 submit 事件
$(selector).submit(function)
可选。规定当发生 submit 事件时运行的函数。
亲自试一试 - 实例
使用 preventDefault() 函数来阻止对表单的提交。502 Bad Gateway
502 Bad Gateway}

我要回帖

更多关于 jquery 提交表单 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信