Ajax Форма обратной связи

Question

Я искал форму ajax (jQuery или любой другой фреймворк), которая будет отправлять три переменные в фоновом режиме, а затем отображать текст вместо себя, не обновляя веб-сайт.

Пример:

http://net.tutsplus.com/demos/contactform/

Пример выше поставляется с учебным пособием, но, к сожалению, бэкэнд PHP для этого не работает, поэтому я ищу что-то еще.

Ты что-то имеешь в виду? Или какие-нибудь советы для начинающего jQuery, как построить его с нуля?

Если подобные запросы здесь запрещены, я хочу спросить, как отправлять переменные с помощью этого скрипта:

    $.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: dataString,  
  success: function() {  
    $('#contact_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");  
    });  
  }  
});  
return false; 

В конец? У меня была долгая борьба с собственным файлом bin / process.php, и, похоже, ничего не работает (часть «success» сценария jQuery никогда не возникает).

Большое спасибо.

Answer 1

Вам нужно добавить echo '(something)'; в ваш PHP, и он должен работать.Вы должны изменить свой JS на следующее для лучшей анимации:

$.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: dataString,  
  success: function() {  
    $('#message').hide(data)
    .html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")    
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");
      $('#contact_form').html("<div id='message'></div>");  
    });  
  }  
});  
return false;

Чтобы передать переменные, вам нужно установить dataString либо 'key1=bob&key2=bob2' (строка), либо словарь - {key1:'bob', key2:'bob2'}.Для получения дополнительной информации см. Документацию jQuery ajax .

Вы также можете добавить обработку ошибок, изменив сообщение echo и добавив оператор if .. else в функцию успеха.Вы также можете использовать JSON, но это излишне для этого.

Answer 2

«успех» должен срабатывать, если bin / process.php существует и что-то выводит.Вы можете написать process.php так, как вы обычно пишете обработчик отправки формы (т. Е. С или без AJAX), потому что данные будут доступны в $_POST.

Затем, если ваша передняя страницаэлемент contact_form (<div id="contact_form">) вы должны увидеть результат.