时间戳

首页 > 解决方案 > 我想将文件发送到 api url 并获得响应而不使用 ajax 重定向到它

javascript - 我想将文件发送到 api url 并获得响应而不使用 ajax 重定向到它

问题描述

下面的代码是带有动作 api 链接的表单，这就是我的 ajax 请求

$('#form1').submit(function(e) {
  $.ajax({
    type: "POST",
    url: "http://www.example.com/uploader",
    data: formdata,
    success: function(data) {
      alert(data);
    }
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="http://www.example.com/uploader" id="myForm" method="post" name="myForm">
  NDA DOC: <input type="file" name="file1">
  <input type="submit" id="submit">
</form>

当我向该 api 发送文件时，它会响应数据

标签： javascriptphpajaxwordpress

解决方案

您需要在表单标签中添加 enctype 并使用 preventDefault 来防止页面刷新。

您需要序列化数据并发送数据。

在success您需要处理响应的区域上。

HTML

<form action="http://www.example.com/uploader" id="form1" method="post" name="myForm" enctype="multipart/form-data">   
  NDA DOC: <input type="file" name="file1">
  <input type="submit"  id="submit">
</form>

JS

 $('#form1').submit(function(e){
    e.preventDefault();
    let data = $( this ).serialize()
    $.ajax({
        type: "POST",
        url: "http://www.example.com/uploader",
        data: data,
        success: function(response){
          // success action here
        },
        error: function(response) {
          // error action here
        }
    });
  });

推荐阅读