Question

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

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

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

成功时将ajax的结果加载到div中

1 个答案: