如何在没有重定向的情况下提交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

由于所有当前的答案都使用 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 4

将隐藏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 5

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

如果您不希望它重定向,则不要设置任何操作和设置 onsubmit="someFunction();"

在someFunction()你做任何你想做的事情(用AJAX或不用),在结尾,你添加return false;告诉浏览器不要提交表格...

Answer 6

自 2020 年起的单行解决方案，如果您的数据不打算作为multipart/form-data或发送application/x-www-form-urlencoded：

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

Answer 7

你需要 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 in 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;
    });
});