Ajax联系表格

I've been looking for an ajax (jQuery or any other framework) form that will send three variables in the background and then display some text instead of itself without refreshing the website.

Example:

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

Example above comes with tutorial, but unfortunately the PHP back-end for it doesn't work so I'm searching for something else.

Do You have something in mind? Or any tips for jQuery beginner how to build it from the ground up?

If requests like this are forbidden here then I want to ask how to send variables using this script:

    $.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; 

To back-end? I had a long fight with own my bin/process.php file and nothing seems to work ("success" part of jQuery script never occurs).

Thanks a lot.

"success" should fire if bin/process.php exists and outputs something. You can write process.php the way you would normally write a form submission handler (i.e. with or without AJAX) because the data will be available in $_POST.

Then, if your front-end page has a contact_form element (<div id="contact_form">) you should see the result.

You need to add an echo '(something)'; to your PHP and it should work. You should change your JS to the following for better animation:

$.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;

To pass variables, you need to set dataString to either 'key1=bob&key2=bob2' (string) or a dictionary - {key1:'bob', key2:'bob2'}. For more info, see the jQuery ajax documentation.

You can also add error handling by changing the echo message and then adding an if .. else statement in the success function. You could also use JSON, but it's overkill for this.