Javascript 提交表单并重定向页面_Javascript_Html

Javascript 提交表单并重定向页面

javascript html

Javascript 提交表单并重定向页面,javascript,html,Javascript,Html,我已经看到了很多和此相关的问题，但并没有一个对我有用。我试图提交一个POST表单，然后将用户重定向到另一个页面，但我无法同时实现这两个目标。我可以得到重定向，也可以得到帖子，但不能两者都得到。以下是我现在拥有的： <HTML> <HEAD> </HEAD> <BODY> <script type="text/javascript"> function redirect()

我已经看到了很多和此相关的问题，但并没有一个对我有用。我试图提交一个

POST

表单，然后将用户重定向到另一个页面，但我无法同时实现这两个目标。我可以得到重定向，也可以得到帖子，但不能两者都得到。以下是我现在拥有的：

<HTML>
    <HEAD>
    </HEAD>
    <BODY>
        <script type="text/javascript">
            function redirect() {
                window.location.href = "http://www.google.com";
            }
        </script>
        <form id="myForm" method=POST name=transferform
          action="some_place.php" onsubmit="redirect();">
            <input name=gold type=text value="1" size=5>
            <input name=recipient type=text value="mypal" size=10>
            <input id="myButton" type=submit name=submission value="Send">
        </form>
        <script type="text/javascript">
            window.onload = function(){
                document.getElementById('myButton').click();
            };
        </script>

    </BODY>
</HTML>


函数重定向（）{
window.location.href=”http://www.google.com";
}
window.onload=函数（）{
document.getElementById（'myButton'）。单击（）；
};

我做错了什么？

一旦提交表单，当前页面上的所有JS执行都将停止。您需要从服务器重定向，或者让服务器弹出一个包含JavaScript的页面，该页面将执行重定向。

您可以使用ajax访问表单，然后在收到服务器的响应后使用JavaScript重定向页面，或者如果您想进行完整页面回发，则可以使用位置标头使用php重定向：

考虑使用延迟覆盖覆盖表单的默认提交行为

$('#myForm').submit(function (e) {
    // prevent form submission
    e.preventDefault();
    var thisForm = $(e.currentTarget);
    $.ajax({
        // simulate form submission
        type: thisForm.attr('method') || 'POST',
        url: thisForm.attr('action') || window.location.href,
        data: $.serialize(thisForm.data())
    })
    .always(function () {
        // when it is done submitting data to the server, redirect
        window.location.replace("http://www.google.com");
    });
});

您可以通过Ajax请求发布表单，并在完成请求后将其重定向到新页面

大概是这样的：

<HTML>
<HEAD>   
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</HEAD>
<BODY>
<form id="myForm" method=POST name=transferform action="some_place.php" onsubmit="return false;">
  <input name=gold type=text value="1" size=5>
  <input name=recipient type=text value="mypal" size=10>
  <input id="myButton" type=submit name=submission value="Send">
</form>

<script type="text/javascript">
  $(function() {
    $(document).on("submit", "#myForm", function(event){
      var name = $('input[name="gold"]:first'),
        recipient = $('input[name="recipient"]:first');
      $.post( "some_place.php", { name: name, recipient: recipient })
      .done(function( data ) {
        window.location.href = "http://www.google.com";
      });
    });
  });
</script>
</BODY>
</HTML>


$（函数（）{
$（文档）。关于（“提交”和“我的表格”，函数（事件）{
变量名称=$（'input[name=“gold”]：first'），
收件人=$（'input[name=“recipient”]：first'）；
$.post（“some_place.php”，{name:name，recipient:recipient}）
.完成（功能（数据）{
window.location.href=”http://www.google.com";
});
});
});

最好的方法是在表单提交后通过服务器端重定向。另一个是防止默认表单提交，并使用ajax提交表单。下面是一个示例代码：

$("#myform").submit(function(e) {
    e.preventDefault();
  var frm = $('#myform');        
    $.ajax({           
       type: frm.attr('method'),
       url: frm.attr('action'),
       data: frm.serialize(),
       success: function (data) {
            console.log('data');
            window.location.replace('your-url');
        }
});

是否无法控制在提交

表单

元素后显示哪个页面？是的，这是表单的操作。

$("#myform").submit(function(e) {
    e.preventDefault();
  var frm = $('#myform');        
    $.ajax({           
       type: frm.attr('method'),
       url: frm.attr('action'),
       data: frm.serialize(),
       success: function (data) {
            console.log('data');
            window.location.replace('your-url');
        }
});