загрузить результаты ajax в div на успех

Question

Только что начал использовать ajax несколько дней назад и наткнулся на новую ситуацию, в которой я нуждаюсь. Часть, о которой я беспокоюсь, - это загрузка. Раньше я загружал содержимое фактического файла с успехом ajax ... теперь я хочу загрузить результаты со страницы, на которую я отправляю.

Опять же, в прошлом я только что вернул массив ['success'] = 'success' и, возможно, некоторые другие переменные для использования в обратном вызове и знать, что это было успешным. Лучше ли делать одну и ту же вещь с большой частью html, хранящейся в одной переменной?

Скажите «данные»], равный html, который я хочу загрузить в div. Это лучшая практика? Мне все еще нужно проверить успех и неудачу обработки, и только успешно загружать данные из него.

$('#show-user').on('click', function() { 
    var $form = $(this).closest('form'); 
    $.ajax({ 
     type: 'POST', 
     url: '/spc_admin/process/p_delete_user_show.php', 
     data: $form.serialize(), 
     dataType : 'json' 
    }).done(function (response) { 
     if (response.success == 'success') { 

      $('#delete_user_info').fadeOut('slow', function(){ 
       $('#delete_user_info').html('+response.data+', function() { 
        $('#delete_user_info').fadeIn('slow'); 
       }) 
      }); 

     } 
     else 
     { 
      // error stuff 
     } 
    }); 
}); 

пример возвращения из PHP:

$ajax_result['success'] = 'success'; // add success info 
$ajax_result['data'] = 'this would be a large chunk of html'; // html to show 

echo json_encode($ajax_result); 

Answer 1

Там нет ничего плохого с передачи/приема большого объема данных с помощью AJAX, в разумных пределах. Если вы говорите о получении разметки для одной страницы, это должно быть хорошо. Лучший способ рассказать - посмотреть вкладку «Сеть» в своих инструментах разработчика и посмотреть, как долго длится запрос. Если время не соответствует вашему удовлетворению, один из вариантов заключается в том, чтобы javascript создавал разметку из набора данных. Тогда вам нужно только спросить сервер для этих данных (более быстрый запрос) и создать javascript для разметки, что может быть очень быстрым. Однако это не обязательно. Примером слишком большого количества данных при передаче будет страница продукта, в которой вы получаете информацию для сотен продуктов одновременно. В этом случае удобными способами могут быть разбиение на страницы или загрузка на свиток.

Что касается уверенности в том, что запрос был успешным, вам было бы полезно изучить заголовки запросов. При получении запроса на сервер, если сервер не может предоставить запрошенную информацию, код состояния этого запроса должен указывать, что произошло. Код состояния 200 должен означать, что сервер предоставил вам html, который вы просили, в этом случае. Если что-то пошло не так, код состояния должен быть установлен на что-то еще, возможно, в 400 или 500 секунд. Check this out for more information on status codes.

Когда я был новичком в Ajax, я хотел бы написать запросы, которые в основном всегда «преуспели», который был бы код состояния 200:

success: function(response) { 
    if (response.status === 'success') { 
    //response is good, use response.data 
    } 
    else { 
    //handle failure 
    } 
} 

Вы видите проблему здесь? Я запросил что-то, и функция успеха запущена, но я проверяю, получил ли я то, что хотел. Если запрос был успешным, тогда я должен получить то, что хочу! Таким образом, код состояния с сервера (если он установлен правильно) является отличным, потому что он говорит нам, было ли что-то успешным, и если да, то у нас определенно есть нужные нам данные. Рассмотрим это:

$.ajax({ 
    url: 'This-file-does-not-exist', 
    //status code is 404, so "error" is called 
    error: function() { 
    console.log('Failed!'); 
    } 
}); 

$.ajax({ 
    url: 'this-file-exists.html', 
    //response code is 200 - success 
    success: function(data) { 
    console.log('Success'); 
    } 
}); 

Так, в целом - установка/проверка кода состояния запроса стандартный подход к определению, если у вас есть данные, которые вы хотите (успех/провал), и это, вероятно, хорошо, чтобы загрузить страницу на сумму html на вызов ajax (но определите это, контролируя время запроса).

К слову, вы можете кэшировать ссылки на элементы, чтобы вы не искали дом каждый раз, когда вам нужно их использовать. Это лучше для производительности. Кроме того, .html() не является асинхронной операцией, поэтому ему не нужен обратный вызов (и он не принимает его).

$myElem = $('#delete_user_info'); 
$myElem.fadeOut('slow', function() { 
    $myElem.html(response); 
    $myElem.fadeIn('slow'); 
}