成功后将结果从 ajax 加载到 div

Question

几天前刚开始使用ajax，遇到了我需要的新情况。我关心的部分是加载。过去，我在 ajax 成功后加载了实际文件的内容....现在我想从我发布到的页面加载结果。

同样，在过去，我刚刚返回了一个数组 ['success']='success'，也许还有一些其他变量用于返回调用并知道它是成功的。将大块 html 存储到单个变量中做同样的事情是最佳做法吗？

Say 'data'] 等于我要加载到 div 中的 html。这是这样做的最佳做法吗？我仍然需要检查处理的成功和失败，并且只有在成功时才从中加载数据。

$('#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');
  }
});

因此，总而言之 - 设置/检查请求状态代码是确定您是否拥有所需数据（成功/失败）的标准方法，并且可以在 ajax 调用上加载价值 html 的页面（但是通过监控请求时间来确定）。

顺便说一句，您可以缓存对元素的引用，这样您就不会在每次需要使用它们时都搜索 dom。这对性能更好。另外，.html() 不是异步操作，所以它不需要回调（也不接受回调）。

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