html前端发送post不起作用,【Web前端问题】如何在网页中POST任意内容并跳转

之前是用jQuery的post()方法实现向服务器POST数据.

现在新需求需要呈现服务器返回的HTML页面.这个呈现是类似于普通form提交后跳转的过程.

解释:

使用表单进行POST的方法

点击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 = $("

")

str = $("#bar").html()

input = $("").val(str).attr('name','bar')

form.append(input)

//....继续添加字段

form.submit()

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

回答：

扩展：

$.extend({

StandardPost:function(url,args){

var form = $("

"),

input;

form.attr({"action":url});

$.each(args,function(key,value){

input = $("");

input.attr({"name":key});

input.val(value);

form.append(input);

});

form.submit();

}

});

调用：

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

回答：

$.extend({

StandardPost:function(url,args){

var form = $("

"),

input;

form.attr({"action":url});

$.each(args,function(key,value){

input = $("");

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 = $("

"),

input;

form.attr({"action":url});

$.each(args,function(key,value){

input = $("");

input.attr({"name":key});

input.val(value);

form.append(input);

});

form.appendTo(document.body);

form.submit();

document.body.removeChild(form[0]);

}

});

回答：

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

方案一

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

function StandardPost (url,args)

{

var form = $("

");

form.attr({"action":url});

for (arg in args)

{

var input = $("");

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

})

}

回答：

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

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

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

回答：

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

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

希望有用。

回答：

不太明白。。

var parm = $("#BiddingRoomForm").serialize();

$.post(url, parm, function (response) {

//code

});

回答：

yourform.on("submit",function(e){

//change or validate the form here

return true // to submit

//return false // to prevent submit

}

回答：

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

回答：

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