美文网首页
在页面中post内容并跳转

在页面中post内容并跳转

作者: 不要变成发抖的小喵喵喵喵喵喵 | 来源:发表于2017-05-26 14:00 被阅读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"},function(){
      window.location.href="/B";
    })
    

    这种方法能够POST自定义数据但是虽然能够手动跳转到B页面,但是并没有办法再传一次参数给B页面

    所以可以用js 动态模拟一个form表单提交的操作

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

    相关文章

      网友评论

          本文标题:在页面中post内容并跳转

          本文链接:https://www.haomeiwen.com/subject/smfxfxtx.html