Insert data through ajax into mysql database

Newsletter:

<form id="form-search" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
    <span><span class="style2">Enter you email here</span>:</span>
    <input name="email" type="email" id="email" required/>

 <input type="submit" value="subscribe" class="submit" onclick="return fun()" />
                        </form>
                        <?php
mysql_connect("localhost","","");
mysql_select_db("");
error_reporting(E_ALL && ~E_NOTICE);

$email=$_POST['email'];
$sql="INSERT INTO newsletter_email(email) VALUES ('$email')";
$result=mysql_query($sql);
if($result){
echo "You have been successfully subscribed.";
}
 if(!$sql)
die(mysql_error());

mysql_close();

?>

But I want to insert my E-Mail to database through Ajax. I don't want my page to get redirected, because every time the page got refreshed, null value got inserted to the database..

I just want my E-mail got inserted to database through Ajax, and after that the email box i.e.

<input name="email" type="email" id="email" required/>  
<input type="submit" value="subscribe" class="submit" onclick="return fun()" />

should get disappeared and there should be the line "you've been successfully subscribed" ..

Any brief code will be very useful.. thank u in advance :)