English 中文(简体)
php使用jquery ajax和fade效果插入返回数据
原标题:php insert return data with jquery ajax and fade effection

我正在用jquery ajax制作一个php-mysql插件。现在我想添加一个效果:如果插入成功与否,还将从ajax进程页面加载带有fadein和fadeout的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 ;
        }
?>
最佳回答

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

EDIT:正如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);

?> 
问题回答

确保您的2.php文件返回的是jQuery可以使用的json对象或javascript数组。然后确保您的成功函数能够访问返回的数据,但目前情况并非如此。

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

希望我已经把自己说清楚了,感觉我现在正在键入一些不可理解的单词。





相关问题
ajax login using httpRequest?

I am trying to develop my login script to give feedback to the user if the login is valid or not. Basically if it isn t correct a div box will show saying its wrong, if its correct it will show its ...

Virtual Tour using sketch up, ajax, flash technologies

I want to know if there are existing technology that make your 3d models in sketch into virtual tours, using either Ajax or Flash for web presentation. If there s none, which will be a good approach ...

How can i update div continuously

I have asp.net application where i have a div which showing the value from other site. The value of that site is changing continuously. I want that my div will automatically update in some interval ...

热门标签