Где или где обновить представление?

Question

Хорошо, это проблема. У меня есть форма MySQL с перетаскиванием «n drop hot spot» и несколькими тегами изображений. Поле данных - это просто символ (100), который хранит ссылку на файл загруженного изображения. С каждым тегом изображения у меня есть кнопка для удаления изображения. Он, в свою очередь, вызывает диалог подтверждения, и если подтвержденный вызов функции javascript для удаления изображения. Функция javascript вызывает отдельный php-файл, который выполняет обновление в таблице MySQL. То, что я хотел бы сделать, - это обновить представление, как только все это будет выполнено. Я искал по всему Google, и этот сайт и попробовал множество версий всего, что утверждалось для работы. Но до сих пор я ничего не нашел. Я не хочу использовать метатег, потому что обнаружил, что если вы пытаетесь загрузить изображение неизменно, оно будет обновляться, прежде чем вы сможете завершить загрузку.

Как бы то ни было, все работает нормально, за исключением времени для выполнения обновления. Я предполагаю и логично, что, как только функция обновления php завершит работу, наступило время для выполнения обновления. Но до сих пор мне не удалось получить функцию обновления javascipt для работы с внешним php. Также кажется, что из начальной функции javascipt она не дожидается завершения php до вызова обновления оттуда. Другими словами, как и последние несколько строк:

ajaxRequest.open("GET", "AjaxDeleteImage.php" + queryString, true); 
ajaxRequest.send(null); 
//window.location.reload(true); 

Где вы можете видеть Я прокомментировал перезагрузку. Я попробовал его там, но он просто убил все. Я был бы рад добавить больше кода, если это необходимо. Может быть, мой метод слишком запутан, и кто-то может дать мне быстрый удар, если понадобится.

Answer 1

AJAX-вызовы являются асинхронными, поэтому после завершения запроса остальная часть скрипта выполняется. Обычно это хорошая вещь, иначе ваша страница будет зависать до тех пор, пока не будет выполнена AJAX.

Чтобы выполнить действие, когда запрос AJAX завершен, вам необходимо назначить функцию обратного вызова. Это будет выполняться при выполнении AJAX. Или более точно, когда изменяется состояние запроса AJAX.

Я поднял это от W3Schools:

xmlhttp.onreadystatechange=function() 
{ 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     //refresh page here or do other cool stuff 
    } 
} 

В вашем случае вы бы изменить xmlhttp к ajaxRequest.

Свойство onreadystatechange ожидает функцию, и эта функция будет вызываться всякий раз, когда изменяется состояние запроса AJAX. Есть 5 разных состояний, но тот, который вас интересует, это 4, так как это «Я закончил!». государство. Функция выше проверяет это состояние, а также проверяет код состояния http, возвращенный с сервера. Если это 200 жизнь, и вы можете делать то, что вам нужно. Обратный вызов должен быть объявлен перед вызовом .send().

Вы также можете проверить другие коды состояния и соответственно отреагировать (скажем, вывести сообщение об ошибке, если есть код состояния 404 или 500, или сбросить страницу до известного состояния, чтобы пользователь мог попробовать снова).

xmlhttp.onreadystatechange=function() 
{ 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     //refresh page here or do other cool stuff 
    } 
    elseif (xmlhttp.readyState==4 && xmlhttp.status==500) 
    { 
     //uh oh, something went wrong. Call Batman! 
    } 
} 

В отличие от библиотек, таких как JQuery, завершают функциональность AJAX в некоторые очень простые в использовании функции. Простой JQuery пример:

$.get('myurl.php') 
.done(function() { 
    alert("success"); 
}) 
.fail(function() { 
    alert("error"); 
}) 
.always(function() { 
    alert("complete"); 
}); 

Как вы можете видеть, вы можете выполнить свой GET запрос и определить все обработчики в одном простом заявлении.Если вы только заботитесь об успехе, вы можете сократить его до:

$.get('myurl.php', function(){ 
    alert('success'); 
});