AJAX альтернатива использования jQuery form ui - PullRequest
Новая
       23

AJAX альтернатива использования jQuery form ui

1 голос
/ 30 марта 2012

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

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

// 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);
    });
}

1 Ответ

1 голос
/ 30 марта 2012

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

$.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 = value1 & param2 = value2 & param3 = value3'
  • тип может быть: POST или GET
  • dataType может быть: json, html, xml ..

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

...