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

Posted 2023-02-22

【中文标题】如何在没有重定向的情况下提交 HTML 表单

【英文标题】：How to submit an HTML form without redirection

【发布时间】：2014-11-16 23:33:03

【问题描述】：

如果我有这样的表格，

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

如何在不通过 javascript/jQuery 重定向到另一个视图的情况下提交它？

我从 *** 中阅读了大量答案，但所有答案都将我重定向到 POST 函数返回的视图。

【问题讨论】：

你想要一个 XHR 请求 (AJAX)

XHR / AJAX 是一种方式——它提交帖子并在后台获取响应，因此浏览器永远不会离开它所在的页面。另一种方法是处理帖子后的服务器端重定向，这取决于您使用的服务器技术。

@StephenP 我使用 ASP.NET MVC 5.1。

@Duke，我要说的是不止一种方法（ajax 与服务器重定向），您的选择取决于您的需要。现代网站很可能想要做 ajax。另请注意，所有这些答案都在说您需要 jQuery — jQuery 很棒，但有 有，事实上，还有其他方法来做 ajax...虽然我自己确实会使用 jQuery .

我的方式简单干净优雅，只需要2行代码。它不使用脚本，并且可以在 html4 及更高版本中运行，即使 JavaScript 已关闭。

【参考方案1】：

参见 jQuery 的 post 函数。

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

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

【参考方案2】：

为了达到你想要的，你需要使用jQuery Ajax，如下：

$('#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(...)调用这个函数

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

【讨论】：

这很好，问题是我不希望它以这种方式自动（总是）提交。我想要一个带有名称的函数来执行您在答案中发布的这些内容。因此，我可以在需要时手动调用它，以使其发布表单。如下所示，我可以给出要调用的函数的名称。 @Html.ActionLink("Add a Report", "Create", "Reports", new carId = Model.Id , new onclick = "FUNCTION_WHICH_SUBMITES_FORM()" )

这有效：function SubForm () alert("1"); //e.preventDefault(); $.ajax( url:'/Car/Edit/@Model.Id/', type:'post', data:$('#myForm').serialize(), success:function() alert("fasf"); );

由于某种原因，您的第二个解决方案不起作用，但我在上一条评论中发布的解决方案起作用了。我会把我的解决方案添加到你的帖子中，因为你我可以做到这一点。

第二个也必须工作，可能还有其他问题，但如果您找到了解决方案，我们现在不需要走那条路！很高兴它有帮助；）

感谢this的回答还帮我在提交后用自定义文本代替了表单

【参考方案3】：

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

【讨论】：

您有什么特殊原因不缩进此源代码吗？它看起来像是 C 发明之前 60 年代的代码。我以为我们已经结束了很长时间。

【参考方案4】：

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

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

在您的someFunction() 中，您可以做任何您想做的事（无论是否使用 AJAX），最后，您添加 return false; 以告诉浏览器不要提交表单...

【讨论】：

有一种神奇的方法。设置一个目标属性，以便表单重定向到当前帧以外的某个地方。如果您在页面中为此类内容添加不可见的 iframe。这很简单。

【参考方案5】：

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

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

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

【讨论】：

这很棒。但是，在提交表单后，我该怎么做呢？即表单的文本字段必须为空，焦点回到第一个字段等？

有某种javascript可以做到这一点。只需将<input type='submit'... 更改为<input type='reset' 并添加onclick='document.forms["myForm"].submit();'>

漂亮的答案！效果很好

小心，它可能会将表单所在的页面重新加载到 iframe 中，如果您正在构建应用程序或大型网站，这可能会导致性能问题。

【参考方案6】：

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

<iframe name="hiddenFrame"   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 来保证未来的发展。

【讨论】：

根据 MDN，target 的这种行为是完全有效的，所以 AJAX 仍然是可选的。

【参考方案7】：

还可以通过将提交按钮移到表单之外来实现所需的效果，如下所述：

Prevent page reload and redirect on form submit ajax/jquery

像这样：

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
</form>

<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>

【参考方案8】：

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

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

【参考方案9】：

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

【讨论】：

非常感谢！

我向你致敬。我花了几个小时试图弄清楚如何让 jquery 使用 contentType=false 参数将表单发送到 nginx 后端，结果总是得到 415。这是我发现的唯一解决我的特定问题的解决方案。

【参考方案10】：

如果您控制后端，请使用 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)

【参考方案11】：

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

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

【讨论】：

如果和OP的action="..."结合使用，可以有效防止页面切换，也可以防止数据通过网络提交。

@Kev 我个人通过 JS XHR 发送我的数据，这就是我不想要页面重定向的原因，因为它是一个 JS 应用程序

@Kev 对不起，我应该提到这一点