如何在没有重定向的情况下提交html表单？

Question

如果我有这样的表格：

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm"> ... </form>

如何在不通过JavaScript / Jquery重定向到另一个视图的情况下提交它？我从StackOverflow中读到了很多答案，但所有答案都将我重定向到POST函数返回的视图。

Answer 1

您可以通过将表单的action重定向到<iframe>来实现这一目标。它不需要JavaScript或任何其他类型的脚本。

<iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>

<form action="submitscript.php" target="dummyframe">
    <!-- form body here -->
</form>

如果你真的很狡猾，你可以修改CSS中的position=absolute和z-index值，以确保框架不呈现。如果这很重要，那么最好还是使用AJAX。

Answer 2

为了实现您的目标，您需要使用jquery ajax，如下所示：

$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url:'/Car/Edit/17/',
        type:'post',
        data:$('#myForm').serialize(),
        success:function(){
            //whatever you wanna do after the form is successfully submitted
        }
    });
});

更新（根据以下评论）

试试这个：

function SubForm(e){
    e.preventDefault();
    var url=$(this).closest('form').attr('action'),
    data=$(this).closest('form').serialize();
    $.ajax({
        url:url,
        type:'post',
        data:data,
        success:function(){
           //whatever you wanna do after the form is successfully submitted
       }
   });
}

更新2 （OP添加了这部分，因为这是他的最终解决方案）

这完美无瑕。我从Html.ActionLink(...)

调用此函数

function SubForm (){
    $.ajax({
        url:'/Person/Edit/@Model.Id/',
        type:'post',
        data:$('#myForm').serialize(),
        success:function(){
            alert("worked");
        }
    });
}

Answer 3

在页面底部放置一个隐藏的iFrame，并在表单中target：

<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm" target="hiddenFrame"> ... </form>

快速简便。请注意，虽然target属性仍然受到广泛支持（并且在HTML5中受支持），但在HTML 4.01中已弃用。 所以你真的应该使用ajax来面向未来。

Answer 4

好吧，我不会告诉你一个神奇的方法，因为没有。 如果您为表单元素设置了操作属性，则将重定向。

如果您不想让它重定向，请不要设置任何操作并设置onsubmit="someFunction();"

在你的someFunction()中，你做任何你想做的事情（或者是否使用AJAX），在结尾处，你添加return false;告诉浏览器不要提交表格......

Answer 5

你需要ajax来实现它。像这样的东西

$(document).ready(function(){
    $("#myform").on('submit', function(){
        var name = $("#name").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var contact = $("#contact").val();

        var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password + '&contact1='+ contact;
        if(name==''||email==''||password==''||contact=='')
        {
            alert("Please Fill All Fields");
        }
        else
        {
            // AJAX Code To Submit Form.
            $.ajax({
                type: "POST",
                url: "ajaxsubmit.php",
                data: dataString,
                cache: false,
                success: function(result){
                    alert(result);
                }
           });
        }
        return false;
    });
});

Answer 6

由于当前所有答案都使用jQuery或iframe技巧，因此认为仅使用普通JavaScript添加方法就没有害处：

function formSubmit(event) {
  var url = "/post/url/here";
  var request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.onload = function() { // request successful
  // we can use server response to our request now
    console.log(request.responseText);
  };

  request.onerror = function() {
    // request failed
  };

  request.send(new FormData(event.target)); // create FormData from form that triggered event
  event.preventDefault();
}

// and you can attach form submit event like this for example
function attachFormSubmitEvent(formId){
  document.getElementById(formId).addEventListener("submit", formSubmit);
}

Answer 7

如果您的数据不打算以multipart/form-data或application/x-www-form-urlencoded的形式发送，那么截至2020年将是一个班轮解决方案

<form onsubmit='return false'>
    <!-- ... -->           
</form>

Answer 8

参见jQuery的post函数。

我会创建一个按钮，并设置onClickListener（$('#button').on('click', function(){});），并在函数中发送数据。

另外，请参阅jQuery的preventDefault函数。

Answer 9

通过将提交按钮移动到表单之外，也可以实现所需的效果：

Prevent page reload and redirect on form submit ajax/jquery

像这样：

    $userIDs = Import-CSV "C:\Users_.csv"
    foreach($userID in $userIDs)
    { 
    Get-ADUser -Filter "EmployeeID -eq $($userID.EmployeeID)" -Properties SAMAccountName 
    }

    Export-CSV "C:\UserResults.csv" -NoTypeInformation -Encoding UTF8

Answer 10

使用此代码段，您可以提交表单并避免重定向。相反，您可以将成功函数作为参数传递，并做任何您想做的事情。

function submitForm(form, successFn){
    if (form.getAttribute("id")!='' || form.getAttribute("id")!=null){
        var id = form.getAttribute("id");
    } else {
        console.log("Form id attribute was not set; the form cannot be serialized");
    }

    $.ajax({
        type: form.method,
        url: form.action,
        data: $(id).serializeArray(),
        dataType: "json",
        success: successFn,
        //error: errorFn(data)
    });
}

然后只需：

var formElement = document.getElementById("yourForm");
submitForm(formElement, function() {
    console.log("Form submitted");
});

Answer 11

如果您控制后端，请使用response.redirect之类的东西代替response.send

您可以为此创建自定义html页面，或仅重定向到您已经拥有的页面

在express.js中：

const handler = (req, res) => {
  const { body } = req
  handleResponse(body)
  .then(data => {
    console.log(data)
    res.redirect('https://yoursite.com/ok.html')
  })
  .catch(err => {
    console.log(err)
    res.redirect('https://yoursite.com/err.html')
  })
}
...
app.post('/endpoint', handler)