如何在不丢失页面的情况下使用 JS 提交表单答案

【问题标题】：how to submit form using JS without loosing the page如何在不丢失页面的情况下使用 JS 提交表单
【发布时间】：2021-12-15 00:29:24
【问题描述】：

我需要使用代码myform.submit(); 提交普通表单，但同时我不希望它重新加载页面。

为此，我在表单本身中使用了onsubmit="return false;"，此外，我还为表单EventListener 使用了这段代码e.preventDefault();。我在 asp.net 核心服务器端使用了返回类型 return Json(rslt); ，尽管我总是丢失我的页面并得到一个值为 Json(rslt) = 1 的空页面

我错过了什么吗？

HTML

<form id="cloneFile" onsubmit="return false;" asp-action="postFile" asp-controller="Rooms"  method="post" enctype="multipart/form-data">

  some html 

</form>

JAVASCRIPT

var myform = document.getElementById('cloneFile');
function somefun (){

  .... bla bla bla 
  myform.submit();

}



myform.addEventListener("submit",
function (e) {
            
  e.preventDefault();

  var frm = e.target;
  var ClonedFrm = frm.cloneNode(true);
  ClonedFrm.removeAttribute("id");

  var frmData = new FormData(ClonedFrm);
  var Url = e.target.action; 

  fetch (Url, {method: "POST", body: frmData}) 
  {
     ... bla bla bla 
  })

  return false;

});

Asp.Net Core

[HttpPost]
public IActionResult postFile([FromForm] SubjectFile fileData)
{
  int rslt = 0;
  if (ModelState.IsValid)
  {
      fileData.Id = Guid.NewGuid();
      _context.Add(fileData);
      rslt = _context.SaveChanges();
  }
  return Json(rslt);
}

【问题讨论】：

标签： javascript html asp.net-core

【解决方案1】：

您错过了表单标签第一行中的最后一个“>”符号。

否则，这段代码在我这边可以正常工作。

【讨论】：

【解决方案2】：

当您允许通过 HTML 提交表单（单击提交按钮或通过键盘）时，此方法有效。

var myform = document.getElementById('cloneFile');

myform.addEventListener("submit", function(e) {
  e.preventDefault();
  console.log('submit')
});

<form id="cloneFile" method="post">
  <label>test: <input type="text" /></label>
  <button type="submit">Submit</button>
</form>

但是，如果您尝试通过 HTMLFormElement.submit() 以编程方式提交表单...

没有引发提交事件。特别是，表单的 onsubmit 事件处理程序没有运行。

因此，不会阻止表单的默认行为。

如果您出于某种原因需要以编程方式提交表单，则可以使用HTMLFormElement.requestSubmit()，它的作用就像点击了表单的提交按钮一样。

var myform = document.getElementById('cloneFile');

myform.addEventListener("submit", function(e) {
  e.preventDefault();
  console.log('submit')
});


function somefun(){
  myform.requestSubmit();
}


somefun()

<form id="cloneFile" method="post">
  <label>test: <input type="text" /></label>
</form>

注意：Internet Explorer 或 Safari 不支持 HTMLFormElement.requestSubmit()

【讨论】：