从表单提交中获取 JSON 响应

Question

我不是前端开发人员，我花了很多时间尝试这样做。希望你们能帮助我。我有一个将文件发送到服务器中的 API 的表单，如下所示：

 <form id="uploadForm" action="url/upload/" method="post" enctype="multipart/form-data" accept-charset="ISO-8859-1">

      <div class="inputFileCustom">
        <input type="file" size="45" name="file" id="uploadFiles" accept="application/pdf"/>
        <label for="uploadFiles">
            <div class="ic-bt ic-bt-details ic-bt-text btn btn-border">
            Choose a file
            </div>
        </label>
    </div>

    <input type="submit" value="Upload PDF" class="btn btn-primary" />
</form>

url/upload 返回一个 JSON，例如：

 { "status": "ok"/"fail" }

我需要两件事：

1. 防止提交重定向到 url/upload ；
2. 从服务器获取 JSON 响应，如果成功，则调用 loadFiles() 函数（已在运行）。

我正在为 loadFiles() 函数使用 javascript，但它非常简单。

原文由 Leonardo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 jquery 表单处理程序，

 <script>

    // Attach a submit handler to the form
  // Attach a submit handler to the form

$("#uploadForm").submit(function(event) {

    var formData = new FormData();
    formData.append("uploadFiles", $('[name="file"]')[0].files[0]);
    event.stopPropagation();
    event.preventDefault();
    $.ajax({
      url: $(this).attr("action"),
      data: formData,
      processData: false,
      contentType: false,
      type: 'POST',
      success: function(data) {
        alert(data);
        loadFiles()
      }
    });
    return false;
  });

    </script>

参考这个 计算器问题

原文由 Shankar Gurav 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

看起来您需要使用 Javascript 发布请求。如果您使用的是 JQuery，则可以使用 $.ajax 例如：

 $.ajax({
    url: '',
    type: '',
    data: {},
    success: function(data){
        console.log(data);
    }
})

使用这意味着它不会将页面重定向到远离表单的位置，因此您可以在同一屏幕上显示成功或错误消息。

有关详细信息，请参阅 http://api.jquery.com/jquery.ajax/

原文由 Luke P 发布，翻译遵循 CC BY-SA 3.0 许可协议