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

Question

之前是用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来提交数据.因为提交的数据是页面上几个p的全部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()

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

Answer 1

扩展：

$.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'});

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

这段代码有兼容性问题，在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]);
    }
});

Answer 3

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

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

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

Answer 4

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

在 A 页面，向 B 页面发起 POST 请求，收到服务器返回的 data，带着 data 跳转到 B 页面，在 B 页面呈现 data？

1. 拿到 A 页面要提交的数据，用 base64 编码。
2. 向 B 页面发起 POST 请求，把 base64 编码后的数据传过去。
3. 服务端返回数据为 data，data 必须是 base64 编码后的。
4. 带着 data 跳转到 B 页面，URL 传参。
5. B 页面的 javascript 通过 URL 取值，base64 解码，呈现。

既然是做真正的跳转，那肯定要把数据带过去，要不然是没法呈现服务器返回的数据的。至于怎么发请求，具体用哪个格式（ blob 还是 base64），你再自己选择试试。

希望有用。

Answer 5

不太明白。。

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

Answer 6

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

方案一

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

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

Answer 7

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

Answer 8

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

Answer 9

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