表单提交数据到SQL DB没有页面重新加载（jQuery / PHP？）然后更改div内容

Currently have this form

<div id="subfooter">
<form name="subscribe" method="post">
<input type="email" placeholder="e-mail address">
<input type="submit" value="Subscribe">
</form>
</div>

I also have another page called "_add_subscriber.php" which has the correct information to take the $_POST Data and push it into SQL.

Also I currently have 2 forms on my page. (each with different identifiers).

Now my question is...

When the submit button of form:subscribe is hit I want to post the data hidden to that _add_subscriber.php page thus enter the data to the database. (Not refreshing page!) I also on click want to replace the contents of the 'subfooter' Div with something like...

<span>thanks for subcribing</span>

Thus hiding the original form.

I hope this makes sense, I have look at other solution but don't totally understand how they collect data from this specific form. Though It does seem to generally be a trait that PHP + jQuery can complete all the above actions for me!

Take a look into Jquery Serialize.

Setting your HTML

<form name="subscribe" method="post" action="_add_subscriber.php">

Simple Ajax function I use for form submissions.

$('#subfooter form').on('submit', function() {

    var $form = $(this);

    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: $form.serialize(),
        success : function(data) {
    // console.log(data);
    // $('span').show(); // etc
  }
    });

    return false;
});