ajax ile mysql kayıt silme

9 Cevap php

Ben canlı bir veritabanından kayıtları silme ve anında sayfayı yenilemek için en iyi yolu bilmek istiyorum. Şu anda ben aşağıdaki javascript yöntemi ile, ajax kullanıyorum:

function deleterec(layer, pk) {
   url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
   update('Layer2', url);
}

eğer cmd = deleterec php sayfasında, bir silme nerede birincil anahtar = pk yapılır. Bu rekor olarak çalışıyor ancak sayfa güncellenen değil, silinir.

Benim güncelleme yöntemi oldukça basittir:

function update(layer, url) {
    var xmlHttp=GetXmlHttpObject(); //you have this defined elsewhere

    if(xmlHttp==null) {
        alert("Your browser is not supported?");
    }

    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
            document.getElementById(layer).innerHTML=xmlHttp.responseText;
        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            document.getElementById(layer).innerHTML="loading";
        }

       //etc
    }

    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}

silmek veya kayıt değiştirmek ve sayfa upate nasıl.

Şu anda benim ajax çerçevenin farklı katmanlar halinde görüntülemek için farklı sorgular seçmek için çalışıyor bir javascript güncelleme yöntemi, veri geçirerek çalışır.

Ben silmek için işlevsellik eklemek, ya da belirli bir şekilde kayıtları değiştirmek istiyorum.

Bir sorguyu çalıştırmak ve sonra benim güncelleme yöntemini çağırın ve tge sayfasını refesh için bir bağlantıyı tıklayarak zaman mümkün olup olmadığını merak ediyorum. Bu benim yöntemleri güncelleme verilen yapmanın kolay bir yolu var mı?

Ben güncelleme yöntemi mümkünse yeniden önlemek istiyorum.

Basit yöntem bir mysql sorgu yürüttükten sonra kendisini yeniden (sadece katmanındaki) php sayfası var olurdu?

Silmek veya bir Paramtre olarak izlemek geçmek ve php buna göre bir sorgu yürütmek ve sonra sayfayı güncellemek yeni bir "alterstatus" yöntemi, yapmak için?

edit: bağlantılar şöyle oluşturulur. deleterec oluşturulan ek bir bağlantıdan olacağını söyledi.

{

$pk = $row['ARTICLE_NO'];

echo '<tr>' . "\n"; 

	echo '<td><a href="#" onclick="updateByPk(\'Layer2\', \'' . $pk . '\')">'.$row['USERNAME'].'</a></td>' . "\n"; 

echo '<td><a href="#" onclick="updateByPk(\'Layer2\', \'' . $pk . '\')">'.$row['shortDate'].'</a></td>' . "\n"; 

echo '<td><a href="#" onclick="updateByPk(\'Layer2\', \'' . $pk . '\')">'.$row['ARTICLE_NAME'].'</a></td>' . "\n"; 


echo '<td><a href="#" onclick="deleteRec(\'Layer2\', \'' . $pk . '\')">'.$row['ARTICLE_NAME'].'</a></td>' . "\n"; 

echo '</tr>' . "\n";

}

edit: bir tabaka ihtiyaç updateByPk ve updateBypg yöntemlerle kullanılır gibi güncelleme yöntemi, değiştirilemez.

9 Cevap

Kod özelliklerini içine çok fazla kazma olmadan, bir gidiş-dönüş (AJAX veya bir sayfa gezinme ya) yapmadan sunucu tarafı DB silmek / güncellemek için herhangi bir yol bilmiyorum. Ancak AJAX ve DOM manipülasyonlar işlemek için bir JavaScript çerçeve (gibi jQuery, ya da başka bir şey) kullanarak öneriyoruz. Yani, teoride, thinbs istemci tarafında herhangi bir çapraz tarayıcı sorun hafifletmek gerekir.

Eğer sana Javascript üzerinden Belgesini güncellemek demek sanırım "anında güncelleme" derken. Ajax ve sayfa yenilenir arada gitmez.

Eğer veri mevcut satırları nasıl gösteriyorsunuz? Bu gibi onları liste edildi Say örneğin:

<div id="row1">row 1</div>
<div id="row2">row 2</div>

Row1 ve row2 birincil anahtarlar 1 & ile veritabanı satırları nerede Sırasıyla 2. DOM ilişkili div kaldırmak için basit bir javascript işlevini kullanın:

function deleterec(pk) {
    url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
    update(pk, url);
}

function update(pk, url) {
    var xmlHttp=GetXmlHttpObject(); //you have this defined elsewhere

    if(xmlHttp==null) {
        alert("Your browser is not supported?");
    }

    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
            document.getElementById(layer).innerHTML=xmlHttp.responseText;
            removeDomRow(pk); //You may wish to check the response here
        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            document.getElementById(layer).innerHTML="loading";
        }
    }
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}

Ve aşağıdaki işlevi DOM işlemek için:

function removeDomRow(pk){
        var row = document.getElementById('row' + pk);
        row.parentNode.removeChild(row);
}

Tabloları kullanarak iseniz:

<tr id="row1">
    <td>row 1</td>
</tr>
<tr id="row2">
    <td>row 2</td>
</tr>

Sen kullanabilirsiniz:

 function removeDomRow( id ) { // delete table row
    var tr = document.getElementById( 'row' + id );
    if ( tr ) {
      if ( tr.nodeName == 'TR' ) {
        var tbl = tr; // Look up the hierarchy for TABLE
        while ( tbl != document && tbl.nodeName != 'TABLE' ) {
          tbl = tbl.parentNode;
        }
        if ( tbl && tbl.nodeName == 'TABLE' ) {
          while ( tr.hasChildNodes() ) {
            tr.removeChild( tr.lastChild );
          }
          tr.parentNode.removeChild( tr );
        }
      }
    }

Böyle Qjuery şeyler olarak bir çerçeve faydalanmak olsaydı theraccoonbear bakış açısından, çok daha kolay olurdu:

$('#row'+id).remove();

Bir sorguyu çalıştırmak ve sonra benim güncelleme yöntemini çağırın ve tge sayfasını refesh için bir bağlantıyı tıklayarak zaman mümkün olup olmadığını merak ediyorum. Bu benim yöntemleri güncelleme verilen yapmanın kolay bir yolu var mı?

Peki, neden sadece bir formu göndermek değil mi?

İki seçeneğiniz var:

  • Tam bir yuvarlak yolculuk yapmak, yani öğesi başarıyla silindi bilmek kadar UI güncelleştirmek, OR yok

  • Kullanıcılara Lie

Işlemin sonuçları şüpheli ve önemli olan, ilk seçeneği kullanın. Eğer sonuç emin iseniz, ve insanların ikinci kullanın, ayrıntıları bilmek gerekmez.

Gerçekten, hiçbir şey başarıyla yalan mutlu insanları bu kadar tutar.

Ben POST kullanmak, veritabanından kayıtları silmek için bir HTTP GET yöntemi kullanmak olmaz. Aradığınız etkileşim açıkça synchronous olduğundan ve ben Ajax kullanmak olmaz: güncelleştirin silin. Ben kullanmak istiyorum normal (JS ya da HTML) gönderin.

O dedi, gerçekten xhr kullanmaya kararlı iseniz kalan tek çözüm Renzo Kooi önerdiği gibi sunucudan yanıt dayalı bir çağrıdır.

Sen istemci tarafında ekran güncelleme önemser bir geri oluşturabilirsiniz. Sen XHR fonksiyonu içinde bunu yapabilirsiniz.

    function update(layer, url) {
        var xmlHttp=GetXmlHttpObject(),
             callbackFn = function(){ 
                  /* ... do thinks to reflect the update on the user screen,
                         e.g. remove a row from a table ...*/
                 };

        if(xmlHttp==null) {
            alert("Your browser is not supported?");
        }

        xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
                /* if the server returns no errors run callback 
                   (so server should send something like 'ok' on successfull
                   deletion 
                */
                if (xmlHttp.responseText === 'ok') {
                      callback();
                }
        //=>[...rest of code omitted]

DOM sil ve güncellemek için:

echo '<td><a href="#" onclick="deleteRec(this, \'' . $pk . '\')">'.$row['ARTICLE_NAME'].'</a></td>' . "\n"; 

function deleterec(row, pk) {
    var rowId = row.parentNode.parentNode.rowIndex;
    url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
    update(rowId, url);
}

function update(rowId, url) {
    var xmlHttp=GetXmlHttpObject(); //you have this defined elsewhere

    if(xmlHttp==null) {
        alert("Your browser is not supported?");
    }

    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
            document.getElementById(layer).innerHTML=xmlHttp.responseText;
            deleteRow(rowId); //You may wish to check the response here
        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            document.getElementById(layer).innerHTML="loading";
        }
    }
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}


function deleteRow(i){
    document.getElementById('myTable').deleteRow(i)
}

JQuery önerilen diğer yanıtlardan birini kadar oy olurdu, ama henüz yeterli puanı yok.

Ben aradığınız "güncelleştirme" elde etmek için kolay yolu AJAX ilgili post-sil HTML dönmek silmek için ya da olduğunu düşünüyorum, ya da silme ateşlemesi jQuery kullanmak ve sonra tr, div, vb silebilir . sayfadan.

jQuery.post("get_records.php ", { cmd: "delete", pk: 123 }, function() {
    jQuery("tr.row123").remove(); 
})

Ben üç temel işlemleri tek bir Ajax tabanlı yönetim sayfasında, güncelleme, silme ve ekleme ile gerçekleştirir olduğunu bulduk. Bu eylemlerin her biri, doğal olarak farklı şekillerde DOM değiştirir.

Sen yapmak gibi DOM remove div istiyorsanız update DOM varolan div, ancak bu fonksiyon iyi çalışmaz bir fonksiyonu yazdım Eğer Ajax kullanarak yeni kayıtlar eklemek istediğiniz karar bu soru ne de iyi çalışacaktır.

Bu doğru işlemek için, öncelikle çıktı her satır için benzersiz bir id atamanız gerekir:

$pk = $row['ARTICLE_NO'];

echo '<tr id=\"article_' . $pk . '\">' . "\n"; 

        echo '<td><a href="#" onclick="updateByPk(\'Layer2\', \'' . $pk . '\')">'.$row['USERNAME'].'</a></td>' . "\n"; 

echo '<td><a href="#" onclick="updateByPk(\'Layer2\', \'' . $pk . '\')">'.$row['shortDate'].'</a></td>' . "\n"; 

echo '<td><a href="#" onclick="updateByPk(\'Layer2\', \'' . $pk . '\')">'.$row['ARTICLE_NAME'].'</a></td>' . "\n"; 


echo '<td><a href="#" onclick="deleteRec(\'article_' . $pk .'\', )">'.$row['ARTICLE_NAME'].'</a></td>' . "\n"; 

echo '</tr>' . "\n";

Ve sonra tablo satırı kaldırabilirsiniz bir silme işlevi oluşturmak gerekir:

function delete(layer, url) {
    var xmlHttp=GetXmlHttpObject(); //you have this defined elsewhere

    if(xmlHttp==null) {
        alert("Your browser is not supported?");
    }

    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
    		if(xmlHttp.responseText == 'result=true') {
    			// Here you remove the appropriate element from the DOM rather than trying to update something within the DOM
    			var row = document.getElementById(layer);
    			row.parentNode.removeChild(row);
    		}
        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            document.getElementById(layer).innerHTML="loading";
        }

       //etc
    }

    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}

Ve sonra son olarak senin deleterec işlevini ayarlayın:

function deleteRec(layer, pk) {
   url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
   delete(layer, url);
}

Son bir not olarak, ben bir çerçevenin kullanımını önermiştir başkalarının duyguları yankı var. Herhangi bir çerçevenin kullanımı jQuery, Prototype, Dojo ya da diğer olmak, kısa vadeli ve uzun vadeli faydalar hem de sahip oluyor. Ayrıca, ben aslında bu doğanın bir işlemi gerçekleştirmek için GET kullanmak asla. Bütün bunlar bir uygun URL'yi vurmak bir öğenin silinmesini zorlamak ve ilgili makale sayısında geçmek için yapmak zorunda.