2016-07-21 5 views
1

Я пытаюсь отправить запрос на отправку стороннего API через AJAX, но я возвращаю эти две ошибки, которые я не могу превзойти или исправить.Ajax multipart/formdata post request

Синхронный XMLHttpRequest в основной теме устарел из-за его пагубных последствий для конечного пользователя.

Cross-Origin Request Заблокировано: The Same Origin Policy Запрещает чтение удаленного ресурса на https://my-provided-api-url

Вот мой HTML отправить форму:

<div class="upload"> 
    <h2>Select a file for upload</h2> 
    <form name="addProductForm" id="addProductForm" action="javascript:;" enctype="multipart/form-data" method="post" accept-charset="utf-8"> 
     <input type="file" id="myFile"> 
     <input type="submit" value="Submit" id ="submit-button"> 
    </form> 
</div> 

Вот мой JQuery код для запроса AJAX :

$(document).ready(function() { 
    $("#addProductForm").submit(function (event) { 
     event.preventDefault(); 
     var formData = $(this).serialize(); 

     $.ajax({ 
      url: 'https://my-provided-api-url', 
      type: 'POST', 
      data: formData, 
      async: false, 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function() { 
       alert('Form Submitted!'); 
      }, 
      error: function(){ 
       alert("error in ajax form submission"); 
      } 
     }); 
     return false; 
    }); 
}); 

Благодарим вас заранее.

+0

Первая «ошибка» - это просто предупреждение, потому что вы используете async: false. (Не рекомендуется делать это только потому, что вы не знаете, как обрабатывать async-запросы ajax.) Вторая ошибка имеет любое количество ответов, которые вы найдете, отправив их в Google. Вы должны найти некоторые из этих полезных. – BobRodes

ответ

0

дело с двумя ошибками, в свою очередь:

Синхронный XMLHttpRequest в основном потоке является устаревшим из-за его вредного воздействия на опыт конечного пользователя

Это потому что вы используете async: false, что невероятно плохо. Он блокирует поток пользовательского интерфейса от обновления во время выполнения запроса, который смотрит на пользователя, как браузер повесился. Всегда делайте ваши запросы асинхронными и используйте обратные вызовы для обработки ответа.

Cross-Origin Request Заблокировано: The Same Origin Policy Запрещает чтение удаленного ресурса на https://my-provided-api-url

Это гораздо более серьезной проблемой. В домене, в котором вы делаете запрос, нет CORS. Это означает, что вы не можете запросить свой API через JavaScript, так как вы будете остановлены, купите Same Origin Policy. В качестве обходного пути вы можете сделать локальный запрос AJAX на свой сервер, который затем проксирует запрос третьей стороне и возвращает данные.

0

Причиной ошибки является определение запроса, именно эта линия:

async: false 

Объяснение ошибки в том, что, когда вы делаете Синхронный XMLHttpRequest на основные действия пользователя поток блокируется, пока ответ не имеет были получены. Вы можете сделать это, но осуждается

Вы можете сделать синхронный вызов:

async: false 

Вы должны быть осторожны, потому что поведение отличается. Вы можете увидеть diferents здесь Diferences between sync and async ajax request

Смежные вопросы