Как сделать обратный вызов Jquery после отправки формы?
У меня есть простая форма с remote=true.
эта форма фактически находится в диалоговом окне HTML, которое закрывается, как только нажата кнопка отправки.
теперь мне нужно внести некоторые изменения на главной странице HTML после того, как форма будет успешно отправлена.
я попробовал это с помощью jQuery. Но это не гарантирует, что задачи выполняются после некоторой формы ответа на отправку формы.
$("#myform").submit(function(event) {
// do the task here ..
});
Как прикрепить обратный вызов, чтобы мой код выполняется только после успешной отправки формы? Есть ли способ добавить некоторые .успешный или. полный обратный звонок в форму?
6 ответов
Я только что сделал это -
$("#myform").bind('ajax:complete', function() {
// tasks to do
});
и все работало отлично .
посмотреть эта документация api для более конкретных деталей.
Я не мог заставить решение номер один upvoted работать надежно, но нашел, что это работает. Не уверен, требуется ли это или нет, но у меня нет атрибута action или method на теге, который гарантирует, что сообщение обрабатывается $.функция ajax и дает вам опцию обратного вызова.
<form id="form">
...
<button type="submit"></button>
</form>
<script>
$(document).ready(function() {
$("#form_selector").submit(function() {
$.ajax({
type: "POST",
url: "form_handler.php",
data: $(this).serialize(),
success: function() {
// callback code here
}
})
})
})
</script>
вам придется делать все вручную с вызовом AJAX на сервер. Это также потребует переопределения формы.
но не волнуйтесь, это кусок пирога. Вот обзор того, как вы будете работать с вашей формой:
- переопределить действие отправки по умолчанию (благодаря переданному объекту события, который имеет
preventDefault
способ) - возьмите все необходимые значения из формы
- запуск HTTP запрос
- обрабатывать ответ на запрос
во-первых, вам придется отменить действие отправки формы следующим образом:
$("#myform").submit(function(event) {
// Cancels the form's submit action.
event.preventDefault();
});
а затем, захватить значение данных. Предположим, у вас есть одно текстовое поле.
$("#myform").submit(function(event) {
event.preventDefault();
var val = $(this).find('input[type="text"]').val();
});
а затем запустите запрос. Давайте просто предположим, что это запрос POST.
$("#myform").submit(function(event) {
event.preventDefault();
var val = $(this).find('input[type="text"]').val();
// I like to use defers :)
deferred = $.post("http://somewhere.com", { val: val });
deferred.success(function () {
// Do your stuff.
});
deferred.error(function () {
// Handle any errors here.
});
});
и это стоит сделать.
примечание 2: для анализа данных формы предпочтительнее, чтобы вы используете плагин. Это сделает вашу жизнь очень легкой, а также обеспечит хорошую семантику, которая имитирует фактическую форму отправки действия.
примечание 2: вы не должны использовать откладывает. Это просто личное предпочтение. Вы также можете сделать следующее, И это тоже должно сработать.
$.post("http://somewhere.com", { val: val }, function () {
// Start partying here.
}, function () {
// Handle the bad news here.
});
Я не верю, что есть callback-функция, как вы описали.
что нормально здесь, так это делать изменения, используя какой-то серверный язык, например PHP.
в PHP вы можете, например, получить скрытое поле из своей формы и внести некоторые изменения, если оно присутствует.
PHP:
$someHiddenVar = $_POST["hidden_field"];
if (!empty($someHiddenVar)) {
// do something
}
один из способов сделать это в Jquery-использовать Ajax. Вы можете прослушать submit, return false, чтобы отменить его поведение по умолчанию и использовать на jQuery.пост() вместо этого. на jQuery.пост имеет успех обратного вызова.
$.post("test.php", $("#testform").serialize(), function(data) {
$('.result').html(data);
});
для MVC здесь был еще более простой подход. Вам нужно использовать форму Ajax и установить AjaxOptions
@using (Ajax.BeginForm("UploadTrainingMedia", "CreateTest", new AjaxOptions() { HttpMethod = "POST", OnComplete = "displayUploadMediaMsg" }, new { enctype = "multipart/form-data", id = "frmUploadTrainingMedia" }))
{
... html for form
}
вот код отправки, это в разделе документ готов и связывает событие onclick кнопки, чтобы отправить форму
$("#btnSubmitFileUpload").click(function(e){
e.preventDefault();
$("#frmUploadTrainingMedia").submit();
});
вот обратный вызов, на который ссылается AjaxOptions
function displayUploadMediaMsg(d){
var rslt = $.parseJSON(d.responseText);
if (rslt.statusCode == 200){
$().toastmessage("showSuccessToast", rslt.status);
}
else{
$().toastmessage("showErrorToast", rslt.status);
}
}
в методе контроллера для MVC это выглядит так
[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult UploadTrainingMedia(IEnumerable<HttpPostedFileBase> files)
{
if (files != null)
{
foreach (var file in files)
{
// there is only one file ... do something with it
}
return Json(new
{
statusCode = 200,
status = "File uploaded",
file = "",
}, "text/html");
}
else
{
return Json(new
{
statusCode = 400,
status = "Unable to upload file",
file = "",
}, "text/html");
}
}