PHP вставки возвращают данные с помощью jquery ajax и затухания - PullRequest
Новая
       19

PHP вставки возвращают данные с помощью jquery ajax и затухания

0 голосов
/ 09 мая 2011

Я делаю вставку php mysql с помощью jquery ajax. Теперь я хочу добавить эффект: если вставка будет успешной или нет, то также будет загружен HTML из ajax process page с fadein и fadeout. Как изменить? Благодарю.

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

Ответы [ 2 ]

1 голос
/ 09 мая 2011

Ну, вы могли бы использовать обратный вызов, который вы получили из вашего внутреннего файла. Попробуйте вместо этого.

РЕДАКТИРОВАТЬ: Как Pendo упоминает ниже, вы должны использовать JSON при возврате данных из 2.php.

Отредактированная версия

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

?>
0 голосов
/ 09 мая 2011

Убедитесь, что ваш 2.php-файл возвращает то, что может быть использовано jQuery в качестве объекта json или массива javascript. Затем убедитесь, что у ваших функций успеха есть доступ к возвращенным данным, что сейчас не так.

В приведенном выше примере user741991 вы можете видеть, что объект data отправляется вместе с функцией успеха, которая вызывается после успешного вызова ajax. Если это полезный объект, вы можете использовать data.type и data.message (если возвращаемый объект будет содержать ключи с именами «type» и «message»).

Надеюсь, я прояснил ситуацию, похоже, что сейчас набираю непонятные слова.

...