從表單提交獲取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'。

它與文件一樣。