php插入返回數據與jquery ajax和淡入淡出效果

我正在使用jquery ajax進行php mysql插入。現在我想添加一個效果：如果插入成功或沒有，也會加載從ajax process page淡入淡出的HTML。如何修改？謝謝。php插入返回數據與jquery ajax和淡入淡出效果

的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("INSERT INTO msg (content) VALUES ('$content')"); 

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

來源

2011-05-09 cj333

請問你能否小心地改述一下你的問題。我似乎無法理解你要去哪裏.. – 2011-05-09 13:50:27

@PENDO，當我在'index.php'中插入某些內容時，數據將發送到'2.php'。那麼我想從'2.php'中得到'insert success'或'failed'這個詞，並顯示在'index.php'中的'div＃comment'中。返回的單詞可能具有淡入淡出效果。我的意思是，'插入成功'這個詞首先在'div＃comment'中淡出，然後消失。謝謝 – cj333 2011-05-09 14:03:30

看到我的'解決方案'下面（沒有足夠的字符在這裏） – 2011-05-09 14:41:10

嗯，你可以使用你從你的後端文件獲取回調。改爲嘗試此操作。

編輯：作爲和pENDO提的下方，從2.php返回數據時，你應該使用JSON。

編輯的版本

的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); 

?>

來源

2011-05-09 14:20:39 Limpan

謝謝，@ user741991，@PENDO，但我仍然希望'插入成功'與'fadein' - 'fadeout'效果。例如，當日期第一次插入時，顯示'插入成功'，然後1秒鐘後，'插入成功'從'div＃comment'移動。 – cj333 2011-05-09 15:02:46

@ cj333我最後編輯會爲你做的伎倆。 – Limpan 2011-05-09 15:18:49

@ user741991，謝謝，我已經看到你的更新答案，這是我需要的。 – cj333 2011-05-09 15:23:10

確保您的2.php文件返回，可以由jQuery使用json對象或javascript數組。然後確保你的成功函數可以訪問返回的數據，但目前情況並非如此。

在上面給出的user741991示例中，您可以看到data對象正在與成功函數一起發送，該函數在成功調用ajax之後調用。如果它是可用對象，則可以使用data.type和data.message（如果返回的對象包含名爲'type'和'message'的鍵）。

希望我已經明確自己，感覺就像我現在正在輸入一些不可理解的單詞。

來源

2011-05-09 14:40:52

我最後一次更新，謝謝指出:) – Limpan 2011-07-06 12:36:09

php插入返回數據與jquery ajax和淡入淡出效果

回答

相關問題