JQuery AJAX - 發送帶有附加文件的JSONP表格

我正在爲我們的客戶提供一個聯繫表單，該聯繫表單爲我們創建了具有自己的域的網頁。我們爲他們提供託管和網頁編輯器來創建他們的網站。當他們在他們的網站上創建聯繫表格時，訪問他們的網站並填寫表格與他們聯繫的人員將被髮送到我們的平臺，並向我們的客戶發送一封電子郵件，通知他/她有人填寫了他/她的聯繫表格。JQuery AJAX - 發送帶有附加文件的JSONP表格

爲了使它工作，我們在我們的客戶網頁上使用了一個jsonp ajax調用來發送表單到我們的平臺，該平臺執行電子郵件模板併發送電子郵件。

現在的問題是，我們的客戶要求添加一個input字段類型，以允許任何訪問其頁面的人將文件附加到表單，以便他們可以在聯繫人通知電子郵件中看到附加文件，但我可以' t找到一種方法來使用jsonp，因爲它使用GET方法來創建一個跨域請求和everthing我已經在Stackoverflow中進行了分解，討論了使用POST方法來發送帶有表單的文件並獲取表單數據爲new FormData()。

這裏是我的代碼試圖實施之前有：

var $form = $('form'); 
$form.submit(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     url: url, 
     dataType: "jsonp", 
     data: $form.serialize(), 
     beforeSend: function() { 
      $form.data('allowSending', false); // To prevent multiple sendings while processing 
     }, 
     success: function(data) { 
      alert(data.message); 
      $form.data('allowSending', true); 
     } 
    }); 
});

這是我試過的代碼，但預計它不處理：當發送

var $form = $('form'); 
$form.submit(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     url: url, 
     processData: false, 
     contentType: false, 
     dataType: "jsonp", 
     data: new FormData(this), 
     beforeSend: function() { 
      $form.data('allowSending', false); // To prevent multiple sendings while processing 
     }, 
     success: function(data) { 
      alert(data.message); 
      $form.data('allowSending', true); 
     } 
    }); 
});

（我嘗試過的代碼（第二個））試圖通過URL發送數據作爲對象，如：?callback=jQuery111107622947758095266_1459251318335&[object%20FormData]&_=1459251318336

我該如何解決這個問題？

在此先感謝。

問候。爲了使事情變得更加困難，表單是完全動態的，所以如果解決方案是手動傳遞參數等，它必須以動態的方式用for循環。

來源

2016-03-29 DaGLiMiOuX

您是否嘗試過輸入「POST」？ –

默認情況下，jQuery ajax使用GET方法發送數據將其更改爲POST（在第二個中） –

@MineshPatel - 'dataType：「jsonp」，'強制GET並導致忽略'method'或'type'。 – Quentin

簡短的回答是，你不能。

您的嘗試失敗，因爲JSONP發出GET請求，contentType被忽略，data被視爲字符串（因爲您說processData: false）。

正如您所說，JSONP通過對URL中的所有內容進行編碼來工作。雖然可以使用the File API來讀取文件的內容並將其轉換爲base64編碼的字符串，但這會超出除最小文件以外的所有文件的URL長度限制，從而使其不可行。

停止使用JSONP。這是一種非常骯髒的黑客行爲，曾被用於偷偷摸摸地制定同源政策。我們現在有CORS，這是一個標準，非hacky，高度靈活的方法來選擇性地禁用相同的原產地政策。其靈活性的優點之一是，您可以使用它創建跨源POST請求。

來源

2016-03-29 12:02:13 Quentin

我從來沒有用過CORS來做一個跨域請求。你能分享一個簡單的例子嗎？ :)我使用jQuery來執行AJAX調用，所以我不知道我是否能夠在框架內使用CORS。 – DaGLiMiOuX

@DaGLiMiOuX - 從您現有的代碼中刪除'dataType：「jsonp」，''。您需要在服務器上進行每一項其他更改。我鏈接到的文檔告訴你需要設置什麼標題。如果你使用原始的PHP，使用'header（）'函數。 – Quentin

謝謝。我正在使用Symfony，而不是原始的PHP – DaGLiMiOuX

JQuery AJAX - 發送帶有附加文件的JSONP表格

回答

相關問題