从表单提交获取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()函数（它已在工作）。

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

Answer 1

您可以使用jQuery表格处理程序，请参见http://api.jquery.com/jquery.ajax/，

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

Answer 2

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

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

使用，这意味着它不会从形式重定向的页面了，这样就可以显示成功或错误信息到同一屏幕。

了解更多信息

Answer 3

1. Prevent submit to redirect to url/upload  

    <form id="uploadForm" action="url/upload/" method="post" enctype="multipart/form-data" accept-charset="ISO-8859-1" onsubmit ='return checkRegistration()'> 

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


    <script> 
     function checkRegistration(){ 
      if(!form_valid){   
       return false; 
      } 
      return true; 
     } 
     </script> 

Answer 4

检查此琴：https://jsfiddle.net/41mnz0z1/

$('#uploadForm').submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: '/echo/json/', 
     data: $(this).serialize(), 
     type: 'POST', 
     success: function(data) { 
      alert(data); 
     } 
    }); 
}); 

e.preventDefault()在提交表单（将您重定向到另一个页面）后阻止浏览器的标准操作。 data: $(this).serialize()将表单数据发送到您想要的url: 'fileUpload.php'。

它与文件一样。