首页问答专栏讲堂更多

SegmentFault

首页
问答
专栏
讲堂
标签
发现
- 活动
- 技术圈hi
- 找工作
- 排行榜
- 徽章
- 笔记
- 开发手册
- 广告投放

搜索

立即登录免费注册

热门标签全部 javascript php python java mysql ios android node.js html5 linux c++css3 git golang ruby vim docker mongodb

在 SegmentFault，学习技能、解决问题

每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。

免费注册立即登录问

如何在网页中POST任意内容并跳转

comzyh 2014年04月17日提问 · 2014年04月18日更新

关注 18 关注
收藏 15 收藏，74.3k 浏览

问题对人有帮助，内容完整，我也想知道答案 0 问题没有实际价值，缺少关键内容，没有改进余地

之前是用jQuery的post()方法实现向服务器POST数据.
现在新需求需要呈现服务器返回的HTML页面.这个呈现是类似于普通form提交后跳转的过程.

解释:

使用表单进行POST的方法

<form method="post" action="/B">
<input type="hidden"  name="foo" value="bar">
<button type='submit'>
</form>

点击Submit 就可以向"/B"POST数据并跳转到B页面

Ajax方法

$.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()

上面这种方法虽然能用,但是感觉很丑,有没有更好的方法?

提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知默认排序时间排序

9个回答

答案对人有帮助，有参考价值 3 答案没帮助，是错误的答案，答非所问

$.extend({
    StandardPost:function(url,args){
        var form = $("<form method='post'></form>"),
            input;
        form.attr({"action":url});
        $.each(args,function(key,value){
            input = $("<input type='hidden'>");
            input.attr({"name":key});
            input.val(value);
            form.append(input);
        });
        form.submit();
    }
});

这段代码有兼容性问题，在IE低版本和火狐下不通过，需要在submit前将form.appendTo(document.body)，否则无法提交且不会报错，submit后应该从body中remove此结点。另建议给form加上display:none防止影响展现，最终代码如下：

$.extend({
    StandardPost:function(url,args){
        var body = $(document.body),
            form = $("<form method='post'></form>"),
            input;
        form.attr({"action":url});
        $.each(args,function(key,value){
            input = $("<input type='hidden'>");
            input.attr({"name":key});
            input.val(value);
            form.append(input);
        });

        form.appendTo(document.body);
        form.submit();
        document.body.removeChild(form[0]);
    }
});

kpaxqin1.9k 声望提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 2 答案没帮助，是错误的答案，答非所问

扩展：

$.extend({
    StandardPost:function(url,args){
        var form = $("<form method='post'></form>"),
            input;
        form.attr({"action":url});
        $.each(args,function(key,value){
            input = $("<input type='hidden'>");
            input.attr({"name":key});
            input.val(value);
            form.append(input);
        });
        form.submit();
    }
});

调用：

$.StandardPost('url/path/req',{arg0:'arg0',arg1:'arg1'});

爷爷泡的茶29 声望提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

.....你们确定看过jQuery.post的手册了么

$.post(url, {bar: $('#bar').html(), any: $('#any').html()}, function(response) {});

第二个参数就是发送的数据啊，可以直接用对象发送的好么....

公子34.6k 声望 1

post 方法不能够跳转到目标页面啊。

— comzyh · 2014年04月18日

1 回复 comzyh：

简直不能更丑… 你可以考虑在页面上加一个form，所有input[type="hidden"]，然后赋值提交……

— 公子 · 2014年04月18日

展开评论提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

问题描述的比较模糊（改了一遍之后仍然模糊）。模糊中给给解决方案，看一下行不行。

在 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），你再自己选择试试。

希望有用。

shajiquan1.9k 声望提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

不太明白。。

var parm = $("#BiddingRoomForm").serialize();
$.post(url, parm, function (response) {
//code
});

臭_小子552 声望提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

找了两天解决方法,自问自答.

方案一

基本就是题目描述中的方式,定义一个函数,这样就是丑了点,但是完全符合需求.

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); 
        })
    }

comzyh69 声望提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

yourform.on("submit",function(e){
    //change or validate the form here
    return true // to submit
    //return false // to prevent submit
}

oyanglulu726 声望提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

不太明白，callback里面用Js跳过去不可以么？

rosen720 声望提交评论 × 评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`

-
                        列表

。
同时，被你 @ 的用户也会收到通知答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问

想说楼上的做法有点儿绕弯子了，直接通过超链接带参数的方式跳转好了，这两天我也是在做这么一个功能，类似于从博客园跳转的CSDN上面去，同时还要登陆上去，那么就需要把登陆所需的参数传递到后台的登陆视图里去，之前我也是想怎么用，Ajax或者jsonp神马的都好复杂，最后直接通过url带参跳转的方式过去的，因为form表单提交其实就是Ajax的原理。而凡是通过post之类传参数，后台直接request的就能获取，那么用url带参数也是一样的方式。