ajax post form делает перенаправление страницы

Question

У меня есть тип ввода = «файл», и при изменении этого ввода я хочу отправить форму.

$(document).on("change", "#image-upload", function (e) { 
    $.ajax({ 
     url: '/BlogPost/UploadHomeReport', 
     type: 'POST', 
     data: $('#upload-image-form').serialize(), 
     success: function (response) { 
      console.log(response); 
     } 
    }); 
}); 

<form action="~/BlogPost/UploadHomeReport" method="post" enctype="multipart/form-data" id="upload-image-form"> 
    <input type="file" id="image-upload" name="file" /> 
    <input type="text" name="destinationId" id="destinationId" /> 
</form> 

[HttpPost] 
public JsonResult UploadHomeReport(HttpPostedFileBase file, int destinationId) 
{ 
    var fileName = Path.GetFileName(file.FileName); 
    file.SaveAs(Server.MapPath("~/App_Data/UploadedImages/" + destinationId + fileName)); 
    var path = Server.MapPath("~/App_Data/UploadedImages/" + destinationId + fileName); 
    return Json(path); 
} 

Все работает отлично, но когда он должен вернуть JSON перенаправляет на новую страницу. Почему он не возвращает JSON вместо перенаправления?

Answer 1

Похоже, что у вас есть другие проблемы в вашем коде. Поскольку это слушатель изменений, он не отправляется автоматически. Что-то еще вызывает перенаправление. Вам нужно будет вставить ответ, который вы получаете (302?), И отладить оттуда.

Кроме того, удалите действие в теге формы, чтобы увидеть, все еще отправлено, но лучше предоставить резервную копию, если ваше приложение может работать без javascript.

Answer 2

Действие вашей формы по умолчанию. Вам необходимо остановить отправку формы с помощью e.preventDefault();

Когда происходит событие изменения, следующий метод захватывает и обрабатывает.

Из пути URL-адреса я хочу предположить, что это ASP.NET (возможно), который к тому времени обработка обработки формы будет делать обратную передачу.