将form表单提交文件修改为ajax提交

要将表单的同步提交修改为异步的AJAX提交，你需要使用JavaScript或者jQuery来捕获表单的提交事件，并使用XMLHttpRequest或者jQuery的$.ajax方法来异步发送数据。以下是使用原生JavaScript和jQuery两种方式的示例代码：

原生JavaScript方式:

<form id="myForm">
  <input type="text" name="username" />
  <input type="text" name="password" />
  <button type="submit">Submit</button>
</form>
 
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
 
  var formData = new FormData(this);
 
  var xhr = new XMLHttpRequest();
  xhr.open('POST', this.action, true);
  xhr.onload = function() {
    if (this.status == 200) {
      console.log(this.response);
    }
  };
  xhr.send(formData);
});
</script>

jQuery方式:

<form id="myForm">
  <input type="text" name="username" />
  <input type="text" name="password" />
  <button type="submit">Submit</button>
</form>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#myForm').submit(function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
 
  var formData = new FormData($(this)[0]);
 
  $.ajax({
    url: $(this).attr('action'),
    type: 'POST',
    data: formData,
    processData: false,  // 告诉jQuery不要处理发送的数据
    contentType: false,  // 告诉jQuery不要设置内容类型头
    success: function(response) {
      console.log(response);
    }
  });
});
</script>

在这两个示例中，我们都阻止了表单的默认提交行为，并使用AJAX来异步发送数据。在原生JavaScript的示例中，我们通过FormData对象获取表单数据，并使用XMLHttpRequest来发送请求。在jQuery的示例中，我们使用$.ajax方法，同样通过FormData对象发送数据，并设置processData和contentType为false来确保数据以其原生格式发送。