2

データベースをjQuery.click()で更新してから、AJAXを呼び出しています。私の質問は、SQLが実行されたら、ページのコンテンツを更新するための最良の方法は何であるかということです。これにより、前のアクションを再度実行できるようになります。現在使用してwindow.location.reload(true);いますが、その方法は好きではありません。ページをリロードしたいのは、AJAXが成功した後、更新に使用した要素のコンテンツがデータベースフィールドと一致するようにすることだけです。

これが私のjQueryです：

$(document).ready(function(){
    $("span[class*='star']").click(function(){
        var data = $(this).data('object');

        $.ajax({
            type: "POST",
            data: {art_id:data.art_id,art_featured:data.art_featured},
            url: "ajax-feature.php",
            success: function(data){
                if(data == false) {
                    window.location.reload(true);
                } else {
                    window.location.reload(true);
                }  
            }
        });
        console.log(data.art_featured);
    });
});

PHP：

<section class="row">
    <?php
    $sql_categories = "SELECT art_id, art_featured FROM app_articles" 

    if($result = query($sql_categories)){
        $list = array();

        while($data = mysqli_fetch_assoc($result)){
            array_push($list, $data);
        }

        foreach($list as $i => $row){
    ?>
    <div class="row">
        <div class="column one">
            <?php if($row['art_featured']==0){
            ?>
            <span data-object='{"art_id":"<?php echo $row['art_id'];?>", "art_featured":"<?php echo $row['art_featured'];?>"}' class="icon-small star"></span>
            <?php
                } else if($row['art_featured']==1) {
            ?>
            <span data-object='{"art_id":"<?php echo $row['art_id'];?>", "art_featured":"<?php echo $row['art_featured'];?>"}' class="icon-small star-color"></span>
            <?php
                }
            ?>
        </div>
    </div>
    <?php
        }
    } else {
        echo "FAIL";
    }
    ?>
</section>

編集：

クラスを更新する.starか、その時点でのaの値に応じ.star-colorて更新する必要があります。基本的に、エコーアウトする場所では、Ajaxが成功したらリロードする必要があります。art_featuredart_featuredart_featured

編集：

$("span[class*='star']").click(function(){
    var data = $(this).data('object');
    var $this = $(this); //add this line right after the above

    $.ajax({
        type: "POST",
        data: {art_id:data.art_id,art_featured:data.art_featured},
        url: "ajax-feature.php",
        success:function(art_featured){
            //remember $this = $(this) from earlier? we leverage it here
            $this.data('object', $.extend($this.data('object')),{
                art_featured: art_featured
            });
        }
    });
    console.log(data.art_featured);
});
4

2 に答える 2

1

MySQLデータベースが成功した直後に戻ることができる場合はart_featured、それをajax成功関数に送り返します。ここではデータを操作できますが、最初にクリックされた要素への参照を保存する必要があります。

var data = $(this).data('object');
var $this = $(this); //add this line right after the above

これで、success関数で、使用するdataだけでなく、art_featuredそれが返されるすべてであるために使用します。これで、ターゲット上の既存のデータオブジェクトを更新できます。

success:function(art_featured){
    //remmeber $this = $(this) from earlier? we leverage it here
    $this.data('object', $.extend($this.data('object'),{
        art_featured: art_featured
    }));
}

上記は既存のデータオブジェクトを拡張し、拡張するオブジェクトに基づいてキーと値のペアを再定義できるようにします。

これは意図したとおりに機能しているはずです。

于 2013-03-26T06:07:26.980 に答える
0

あなたの質問を完全には理解していないので、変更したいコンテンツがクラスdivのdivであり、コンテンツを送信したばかりのコンテンツ、つまりデータに置き換えたいとしましょう。次に、データを返す必要があります（おそらく、JSONを使用するのが最も簡単です）。その後、呼び出しは次のようになります。

  $.ajax({
        type: "POST",
        data: {art_id:data.art_id,art_featured:data.art_featured},
        url: "ajax-feature.php",
        dataType:'json',
        success: function(data){
          for(n in data){
            $('.div').append('<p>'+data[n]+'</p>');
            }
        }
});

dataType returnをjsonとして追加し、jsonデータをデータ内のnだけ繰り返し、nを使用して配列からデータを呼び出すことに注意してください。したがって、3番目の項目が名前の場合、次のようなことができます。

 $('.div').append('<p>Name is '+data[3]+'</p>');

json_encode php関数を使用して実行できる、jsonエンコードによってPHPフォームからデータを返す必要があります。クロスドメインの場合は、jsonpを使用する必要があります

編集：フォームを送信する前に置き換えたいデータがすでにわかっている場合（つまり、応答は必要ありません）、それらの変数を成功コールバックに入れることができます。これにより、ajaxが正常に戻るのを待ってから、divを更新します。

だからあなたはこれを持つことができます

var updateText = yourDataFromForm

$.ajax({
        type: "POST",
        data: {art_id:data.art_id,art_featured:data.art_featured},
        url: "ajax-feature.php",
        dataType:'json',
        success: function(data){

            $('.div').append('<p>'+updateText+'</p>');

        }
});
于 2013-03-26T05:56:33.600 に答える