php insert return data with jquery ajax and fade effection

I am making a php mysql insert with jquery ajax. Now I want add an effection: If insert success or not, there will also load the html from ajax process page with fadein and fadeout. How to modify? thanks.

index.php

<script type="text/javascript">
    $(function(){
        $("#submit").click(function(){
        var formvalue = $("#content").val();
        var url = 'submit=1&content=' + escape(formvalue);
         $.ajax({
           type: "POST",
           url: "2.php",
           data: url,
           success: function(){
           $("#content").val('');
           $("#comment").fadeIn(1000, function () {
              $("#comment").html(html);
              });
           $("#comment").fadeOut(1000, function () {
              $("#comment").html('');
              });
           }
         });
        return false;
        });
    });
</script>
<form id="form" action="2.php" method="post">
    <textarea name="content" id="content" cols="30" rows="3"></textarea> <br />
    <input type="submit" id="submit" name="submit" value="Add comment" />
</form>
<div id="comment"></div>

2.php

<?php
    $connection = mysql_connect('localhost', 'root' , 'root') or die(mysql_error());
    $selection = mysql_select_db('my_content', $connection);

    if(isset($_POST['submit'])){

    $content = $_POST['content'];

    $ins = mysql_query("I开发者_运维技巧NSERT INTO msg (content) VALUES ('$content')");

    echo 'insert success';
    }else{
        echo 'failed';
        }
?>

Well, you could use the callback you get from your backend file. Try this instead.

EDIT: As Pendo mention below, you should use JSON when returning data from 2.php.

Edited version

Index.php

<script type="text/javascript">
$(function(){
    // EDIT
    $('#comment').hide();         

    $("#submit").click(function(){
    var formvalue = $("#content").val();
     $.ajax({
       type: "POST",
       url: "2.php",
       data: 'content='+formvalue,
       dataType: 'json', // EDIT set dataType to json
       success: function(ret){
           $("#content").val('');
           if(ret['success'])
           {
              //Fade in 
              $('#comment').html('Insert Success!').fadeIn(1000);
              //Fade Out
              setTimeout(function(){ $('#comment').html('').fadeOut(1000); },1500);
           }else{
              // Fade in
              $('#comment').html('Insert Failed!').fadeIn(1000);
              // Fade out
              setTimeout(function(){ $('#comment').html('').fadeOut(1000); },1500);
           }
       }
     });
    });
});

<textarea name="content" id="content" cols="30" rows="3"></textarea> <br />
<input type="button" id="submit" name="submit" value="Add comment" />
<div id="comment"></div>

2.php

<?php
$connection = mysql_connect('localhost', 'root' , 'root') or die(mysql_error());
$selection = mysql_select_db('my_content', $connection);
$content = $_POST['content'];

/* Set return data to false as default */
$json_ret = array('success'=>false);

$sql = "INSERT INTO msg (content) VALUES ('".$content."')";
if(mysql_query($sql))
{
  /* insert success.. add true  */
  $json_ret['success'] = true;
}

 echo json_encode($json_ret);

?> 

Make sure your 2.php file is returning that that can be used by jQuery either a json object or javascript array. Then be sure that your success functions has access to the returned data, which is right now not the case.

In the example user741991 gave above me you can see the data object is being send along with the success function that is called after a succesfull ajax call. If it's a useable object you could use data.type and data.message (if the returned object would contain a key named 'type' and 'message').

Hopefully I've made myself clear, feels like I'm typing some non-understandable words right now.