2012-03-30 2 views
1

Привет всем Я использовал плагин формы jQuery для обработки формы отправки (находится на http://malsup.github.com/jquery.form.js) на моей странице, но теперь вам нужно переключиться на использование только метода jQuery AJAX (без использования какой-либо формы плагин, но я могу использовать jQuery). Какой был бы лучший способ достижения этого? Мне трудно перевести это. Каким будет идеальное решение?AJAX альтернатива использованию формы jQuery ui

Это код, я использую в настоящее время ниже:

// prepare the form when the DOM is ready 

$(document).ready(function() { 
var options = { 
    target:  '#result', 
    beforeSubmit: showRequest, 
    success:  showResponse 
}; 

// bind to the form's submit event 

$('#booking').submit(function() { 
    $(this).ajaxSubmit(options); 
    return false; 
    }); 
}); 

// pre-submit callback 

function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    // alert('About to submit: \n\n' + queryString); 
} 

// post-submit callback 

function showResponse(responseText, statusText, xhr, $form) { 
    $('#last-step').fadeOut(300, function() { 
    $('#result').html(responseText).fadeIn(300); 
    }); 
} 
+0

Вы можете разместить на [Просмотр Кода] (Http: //codereview.stackexchange. com /) для этого вопроса. – Chad

ответ

1

Вы можете сделать что-то вроде этого:

$.ajax({ 
    url: 'process.php', 
    data: $('form[name="booking"]').serialize(), 
    dataType: 'html', 
    type: 'POST', 
    success: function(data) { 
     $('#last-step').fadeOut(300, function() { $('#result').html(data).fadeIn(300); 
    }, 
    complete: function (data) { 
     // your code here 
    }, 
    error: function (url, XMLHttpRequest, textStatus, errorThrown) { 
     alert("Error: " + errorThrown); 
    } 
}); 
  • Парам данных, может быть что-то вроде этого: 'param1 = значение1 & param2 = value2 & param3 = value3'
  • тип может быть: POST или GET
  • DATATYPE может быть: JSON, HTML, XML ..

Для получения более подробной информации, обратитесь к этому адресу: http://api.jquery.com/jQuery.ajax/

+0

Как работает этот код? – methuselah

+1

Вам нужно указать «url» и «data», тогда у вас есть обратные вызовы .. успех, полный и ошибка ... поэтому, когда запрос к URL-адресу в порядке, без ошибок ... .ajax запускает функцию успеха ... когда завершение завершено, .ajax запускает полную функцию .. и т. д. –

+0

Как применить текущий код к вашему примеру. Имя файла, обрабатывающего форму, - 'process.php'. – methuselah