从表单提交获取JSON响应 [英] Get JSON response from Form Submit

问题描述

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

I am not front end developer and I'm spending a quite time trying to do so. Hope you guys can help me. I have a form which sends files to an API in server, like below:

<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，例如:

url/upload returns a JSON, like:

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

我需要两件事:

1. 阻止提交以重定向到url/upload;
2. 从服务器获取JSON响应，如果成功，则调用loadFiles()函数(该函数已在工作).

1. Prevent submit to redirect to url/upload;
2. Get JSON response from server and, if successful, call loadFiles() function (which is already working).

我正在将javascript用于loadFiles()函数，但这非常简单.

I'm using javascript for loadFiles() function, but its very simple.

推荐答案

您可以将jQuery表单处理程序用作

You can use jquery form handler as,

<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>

请参见 stackoverflow问题

这篇关于从表单提交获取JSON响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！