php插入带有jquery ajax和淡入淡出效果的返回数据答案

【问题标题】：php insert return data with jquery ajax and fade effectionphp插入带有jquery ajax和淡入淡出效果的返回数据
【发布时间】：2011-05-09 13:36:21
【问题描述】：

我正在使用 jquery ajax 进行 php mysql 插入。现在我想添加一个效果：如果插入成功与否，还会从ajax process page 加载带有淡入和淡出的html。如何修改？谢谢。

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';
        }
?>

【问题讨论】：

能否请您仔细改写您的问题。我似乎无法理解你要去哪里..
@PENDO，当我在index.php 中插入内容时，数据将发送到2.php。然后我想从2.php 中得到insert success 或failed 一词，并在index.php 中显示div#comment。返回词可能具有淡入淡出效果。我的意思是insert success 这个词首先淡入div#comment 然后消失。谢谢
在下面查看我的“解决方案”（这里没有足够的字符）

标签： php jquery ajax fade

【解决方案1】：

好吧，您可以使用从后端文件中获得的回调。试试这个吧。

编辑：正如 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);

?>

【讨论】：

谢谢，@user741991，@PENDO，但我仍然想要 insert success 和 fadein - fadeout 效果。比如，第一次插入日期时，显示insert success，然后1秒后，insert success从div#comment移动。
@user741991，谢谢，我已经看到你的更新答案，这就是我需要的。
在 setTimeout 上使用它（fadeOut 函数）。 setTimeout(function(){ $('#comment').fadeOut(1000); },1500);

【解决方案2】：

确保您的 2.php 文件返回可供 jQuery 使用的 json 对象或 javascript 数组。然后确保您的成功函数可以访问返回的数据，而现在情况并非如此。

在上面 user741991 给出的示例中，您可以看到 data 对象与在成功的 ajax 调用后调用的成功函数一起发送。如果它是一个可用的对象，你可以使用 data.type 和 data.message（如果返回的对象包含一个名为 'type' 和 'message' 的键）。

希望我已经说清楚了，感觉我现在正在输入一些难以理解的字词。

【讨论】：