Javascript 如何在不重定向的情况下提交HTML表单

如果我有这样的表格

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

。。。

我如何提交它而不通过JavaScript/jQuery重定向到另一个视图

---

我从Stack Overflow中读到了很多答案，但所有答案都将我重定向到POST函数返回的视图。

请参见jQuery的

POST

函数

我将创建一个按钮，并在（'click'，function（）{}）；上设置一个

onClickListener

（

$（'#button'）。然后在函数中发送数据

另外，请参见jQuery的
preventDefault
函数
 为了实现您想要的，您需要使用以下方法：

$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url: '/Car/Edit/17/',
        type: 'post',
        data:$('#myForm').serialize(),
        success:function(){
            // Whatever you want to 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 want to do after the form is successfully submitted
       }
   });
}

最终解决方案
这是完美的。我从
Html.ActionLink（…）

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

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

如果您不希望它重定向，只需不设置任何操作并设置
onsubmit=“someFunction（）；”

在你的
someFunction（）
中，你可以做任何你想做的事情（不管是否使用AJAX），最后，你添加
return false
告诉浏览器不要提交表单…
可以通过将表单的
操作
重定向到不可见的
来实现。它不需要任何JavaScript或任何其他类型的脚本

<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>

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

在页面底部放置一个隐藏的
iFrame
，并以您的形式将其设置为
目标：

<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中也得到了支持），但在HTML4.01中它被弃用

因此，您确实应该使用Ajax来证明未来。
也可以通过将submit按钮移到表单外部来实现所需的效果，如下所述：


像这样：


输入患者服务器的URL






连接到服务器
使用此代码段，您可以提交表单并避免重定向。相反，您可以将success函数作为参数传递，并执行任何您想要的操作

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

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

如果控制后端，则使用类似于
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)

自2020年起，如果您的数据不打算作为
多部分/表单数据
或
应用程序/x-www-form-urlencoded
发送，则采用一行解决方案：


你想要一个XHR请求（AJAX）XHR/AJAX是一种方式——它在幕后提交帖子并获得响应，因此浏览器永远不会离开它所在的页面。另一种方法是在处理帖子后进行服务器端重定向，这取决于您使用的服务器技术。@StephenP我使用ASP.NET MVC 5.1。@Duke，我想说的是有多种方法（ajax与服务器重定向），您的选择取决于您的需要。现代网站很可能希望使用ajax。还要注意的是，所有这些答案都表明您需要jQuery——jQuery很棒，但事实上，还有其他实现ajax的方法。。。虽然我自己也会使用jQuery，但我的方法简单、简洁、优雅，而且只需要两行代码。它不使用脚本，在HTML4和更高版本中工作，即使JavaScript被关闭。这非常有效。问题是我不希望它以这种方式自动（始终）提交。我想有一个函数的名字做这件事你张贴在你的答案。因此，我可以在需要时手动调用它，使其发布表单。如下所示，我可以给出要调用的函数的名称
@Html.ActionLink（“添加报告”、“创建”、“报告”、新建{carId=Model.Id}、新建{onclick=“FUNCTION_WHICH_submited_FORM（）”}）
这起作用了：
函数子表单（）{alert（“1”）//e.preventDefault（）；$.ajax({url:'/Car/Edit/@Model.Id/'，类型：'post'，数据：$（'#myForm'）.serialize（），success:function（）{alert（“fasf”）；}}
由于某些原因，您的第二个解决方案不起作用，但我在上一条评论中发布的解决方案起了作用。我将把我的解决方案添加到您的帖子中，因为只有因为您，我才能实现这一点。第二个解决方案也必须起作用，可能还有其他一些问题，但如果您找到了解决方案，我们现在就不需要走这条路了！很高兴它有帮助；）ThAnk的回答还帮助我在提交后将自定义文本替换为表单有一种神奇的方法。设置一个目标属性，使表单重定向到当前帧以外的其他位置。如果你在页面中为类似的内容添加一个不可见的iframe。这很简单。这很好。但是在for之后，我该如何做呢m已提交？即表单的文本字段必须为空，焦点返回到第一个字段，等等？有某种javascript可以做到这一点。只需更改
漂亮的答案！效果非常好！小心，它可能会将表单所在的页面重新加载到iframe中，如果您正在构建ap，这可能会导致性能问题p或一个大网站。有什么特别的原因不缩进这个源代码吗？它看起来像是C发明之前的60年代的代码。我想我们已经讨论了很久了。根据MDN的说法，
target
的这种行为是完全有效的，所以AJAX仍然是可选的。非常感谢！我向你致敬。我花了我们试图弄清楚如何让jquery使用contentType=false参数将表单发送到nginx后端
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)