如何在不重新加载页面的情况下提交表单答案

【问题标题】：How to submit form without the page reloading如何在不重新加载页面的情况下提交表单
【发布时间】：2020-06-10 09:08:04
【问题描述】：

我有这个表格

<form action="" method="post" enctype="multipart/form-data" onsubmit="submit()">
<input id="name" class="btn" type="file" name="pic" multiple>
<br/><br/>
<button class="btn btn-primary" type="submit" id="submit" name="submit">UPLOAD</button>
</form>
<br/><br/>

Uploaded file: <a target="blank" href="<?php echo $fileurl;?>"><?php echo $fileurl;?></a>

我有这个脚本

  <script>
function submit(event) {
    event.preventDefault()
    var http = new XMLHttpRequest();
    http.open("POST", "", true);
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var params = "search=" + <<get search value>>; // probably use document.getElementById(...).value
    http.send(params);
    http.onload = function() {
        alert(http.responseText);
    }
}
</script>

我想在不重新加载页面的情况下提交表单，但不适合我。

【问题讨论】：

event.preventDefault()
如何...请提供样品
还将您的按钮类型更改为“按钮”，看看是否有帮助。
将类型更改为“按钮”无效

标签： javascript html jquery ajax forms

【解决方案1】：

您的函数采用event 属性，您可以在其上调用preventDefault()

function submit(event) {
    event.preventDefault()
    var http = new XMLHttpRequest();
    http.open("POST", "", true);
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var params = "search=" + <<get search value>>; // probably use document.getElementById(...).value
    http.send(params);
    http.onload = function() {
        alert(http.responseText);
    }
}

【讨论】：

你的表单上还需要submit 监听器form.addEventListener('submit', submit);
代替onsubmit="submit()" 做一个document.querySelector("form").addEventListener('submit', submit);

【解决方案2】：

<script>
      $('#yourFormData').submit(function(e){
        e.preventDefault();

      var formData = new FormData($('#yourFormData')[0]);
      url ="your route" ;
      $.ajax({
      url : url,
      type : "post",
      data : formData,
      contentType:false,
      processData:false,

      success : function(data)
      {
          // success 


      },
      error :  function(y)
      {

        console.log(error );
       }
      });

    })

【讨论】：

点击后会重新加载

【解决方案3】：

查看此检查功能以停止页面重载

按照您的要求，我已经给出了完整的代码

function check(event) {
    event.preventDefault();
    console.log("stopped form submit");
}

<form onSubmit="check(event)">
<input id="name" class="btn" type="file" name="pic" multiple>
<br/><br/>
<button class="btn btn-primary" type="submit" id="submit" name="submit">UPLOAD</button>
</form>
<br/><br/>
</form>

【讨论】：

请完成
@vsol 正如你所要求的，我已经给出了完整的代码。我希望这对你有用。
我运行代码，点击按钮，没有采取任何行动
@vsol 这是停止页面重新加载的格式。请使用 ajax 提交表单。