удаление записей MySQL с помощью AJAX - PullRequest
Новая
       7

удаление записей MySQL с помощью AJAX

2 голосов
/ 10 февраля 2009

Я хотел бы знать, как лучше всего удалять записи из активной базы данных и мгновенно обновлять страницу. В данный момент я использую ajax со следующим методом javascript: 

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

если cmd = deleterec на странице php, удаление выполняется, когда первичный ключ = pk. Это прекрасно работает, так как в записи удаляется, однако страница не обновляется.

Мой метод обновления довольно прост: 

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

как удалить или изменить запись и обновить страницу.

В данный момент моя ajax-инфраструктура работает, передавая данные в метод обновления javascript, который отлично работает для выбора разных запросов для отображения в разных слоях.

Я хочу добавить функциональность для удаления или изменить записи определенным образом.

Мне интересно, возможно ли при нажатии на ссылку выполнить запрос, а затем вызвать мой метод обновления и обновить страницу tge. Есть ли простой способ сделать это, учитывая мои методы обновления?

Я бы хотел избежать переписывания моего метода обновления, если это возможно.

Был бы самый простой способ сделать так, чтобы страница php (только в слое) перезагрузилась после выполнения запроса mysql?

Или создать новый метод "alterstatus", который передаст delete или watch как параметр, и php выполнит соответствующий запрос и затем обновит страницу?

edit: ссылки генерируются так. deleterec будет вызываться из сгенерированной дополнительной ссылки.

{

$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: метод обновления не может быть изменен, так как он используется методами updateByPk и updateBypg, которым нужен слой.

Ответы [ 9 ]

8 голосов
/ 10 февраля 2009

Не слишком углубляясь в особенности вашего кода, я не знаю ни одного способа обновления / удаления из БД на стороне сервера без выполнения туда-обратно (AJAX или навигация по страницам). Однако я бы порекомендовал использовать JavaScript-фреймворк (например, jQuery или что-то еще) для обработки AJAX и DOM-манипуляций. Теоретически это должно облегчить устранение любых кросс-браузерных проблем на клиентской стороне.

5 голосов
/ 24 февраля 2009

Когда вы говорите «обновить немедленно», я предполагаю, что вы имеете в виду обновить документ с помощью Javascript. Обновления Ajax и страницы не идут вместе.

Как вы отображаете существующие строки данных? Например, вы перечислили их так: 

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

Где row1 и row2 - строки в вашей базе данных с первичными ключами 1 и 2 соответственно. Используйте простую функцию JavaScript, чтобы удалить связанный div из DOM: 

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

И следующая функция для управления DOM: 

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

Если вы используете таблицы: 

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

Вы можете использовать: 

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

С точки зрения theracoonbear, если бы вы использовали каркас, такой как Qjuery, было бы гораздо проще: 

$('#row'+id).remove();
4 голосов
/ 23 февраля 2009

Мне интересно, возможно ли при нажатии на ссылку выполнить запрос, а затем вызвать мой метод обновления и обновить страницу tge. Есть ли простой способ сделать это, учитывая мои методы обновления?

Итак, почему бы вам просто не отправить форму?

2 голосов
/ 28 февраля 2009

Я бы не использовал метод HTTP GET для удаления записей из базы данных, я бы использовал POST. И я бы не стал использовать Ajax, поскольку взаимодействие, которое вы ищете, явно синхронное : удалите, а затем обновите. Я бы использовал обычную отправку (JS или HTML).

Тем не менее, единственное оставшееся решение, если вы действительно намерены использовать XHR, - это обратный вызов, основанный на ответе от сервера, как предложено Ренцо Куи.

2 голосов
/ 23 февраля 2009

У вас есть два варианта:

  • Выполните полный круговой переход, т. Е. Не обновляйте интерфейс, пока не узнаете, что элемент был успешно удален, ИЛИ

  • Обмани своим пользователям

Если результаты операции сомнительны и важны, используйте первый вариант. Если вы уверены в результате, и людям не нужно знать подробности, воспользуйтесь вторым.

На самом деле, ничто не делает людей счастливыми так, как их успешно лгут.

1 голос
/ 28 февраля 2009

Для удаления и обновления DOM: 

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)
}
1 голос
/ 23 февраля 2009

Вы можете создать обратный вызов, который на стороне клиента будет заботиться об обновлении экрана. Вы можете сделать это в вашей функции XHR. 

    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]
0 голосов
/ 02 марта 2009

Я бы проголосовал за один из других ответов, которые рекомендовали jQuery, но у меня пока недостаточно очков.

Я думаю, что самый простой способ добиться нужного вам «обновления» - это либо удалить AJAX, вернуть соответствующий HTML-код после удаления, либо вы можете использовать jQuery, чтобы отключить удаление, а затем удалить tr, со страницы и т. д. 

jQuery.post("get_records.php ", { cmd: "delete", pk: 123 }, function() {
    jQuery("tr.row123").remove(); 
})
0 голосов
/ 02 марта 2009

Я обнаружил, что есть три основных операции, которые выполняет одна из них на странице администрирования на основе Ajax: обновление, удаление и добавление. Каждое из этих действий изменяет DOM по-своему.

Вы написали функцию, которая может обновить существующий div в DOM, но эта функция не будет работать хорошо, если вы хотите удалить div из DOM, как вы не согласны с этим вопросом, и он не будет работать хорошо, когда вы решите, что хотите добавить новые записи с помощью Ajax.

Для правильной обработки сначала необходимо назначить уникальный идентификатор каждой строке, которую вы выводите: 

$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";

А затем вам нужно создать функцию удаления, которая может удалить строку таблицы: 

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

И, наконец, настройте функцию deleterec: 

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

В качестве последнего замечания я должен повторить чувства других, которые предложили использование фреймворка. Использование любого фреймворка, будь то jQuery, Prototype, Dojo или других, будет иметь как краткосрочные, так и долгосрочные преимущества. Кроме того, я бы НИКОГДА не использовал GET для выполнения операций такого рода. Все, что нужно сделать для принудительного удаления элемента, - нажать соответствующий URL-адрес и передать соответствующий номер статьи.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...