".load()的ajax()等效方法是什么?"

Question

".load()的ajax()等效方法是什么?"

javascriptphpjqueryajax

6

我正在使用ajax请求从服务器检索文本字符串, 我尝试使用.load()，但问题是它在运行我的回调函数之前将文本注入页面（该函数只是逐个字母地显示文本）。

为了解决这个问题，我转而使用.ajax()并在成功回调中使用我的函数。这在按字母显示文本方面是有效的。

这里是我的问题所在：当没有更多来自服务器的字符串时，站点应该将您重定向到另一个页面。使用.load()正好可以实现这一点。

然而，使用.ajax()时，未经处理的HTML代码从服务器注入到当前页面中，不能正确呈现。

我不确定如何修复它，并且已经搜索了很长时间的网络。以下是每种方法的代码。

.load() 方法（没有逐字母回调）

$('#nextButton').click(function(){
  $('#thonow').load('next.php');  
});

.ajax()方法（带有逐字回调）

$('#nextButton').click(function(){
  $.ajax({
    url: 'next.php',
    dataType: 'text',
    success: function(result) {
        $('#thonow').html("");
        lbyl('#thonow',result,0,50);
      }
   });
});

如果你需要lbyl函数，以下是提供的代码...

var lbyl = function (target, message, index, interval) {
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () {
        lbyl(target, message, index, interval);
    }, interval);
  }
};

任何帮助都将不胜感激。

- MikelG

1

.load()函数只是$.ajax()的一个方便的前端。 - Pointy

是的，我明白，但是底层设置是什么？换句话说，在我的 .ajax() 函数中，我需要做什么才能使最后一个请求重定向到一个页面而不是注入原始 HTML？ - MikelG

@MikelG：你自己看吧 :) https://github.com/jquery/jquery/blob/555a50d340706e3e1e0de09231050493d0ad841e/src/ajax/load.js#L46-76 - Matt

@Matt 是的，我已经盯着那个问题看了30分钟了。不幸的是，这有点超出了我的能力范围。我还是编程新手。不过我还在努力理解中...希望我能看到一些东西或者有所启发。 - MikelG

在这种情况下，你如何将该响应与逐字逐句的响应区分开来？“替换页面”响应中的顶层元素是什么？（<html>、<body> 或某些 <div>？）。 - Matt

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt · Accepted Answer

直接回答你的问题，$('#thonow').load('next.php') 的 ajax() 等价语句为：

jQuery.ajax('next.php', {
    type: 'GET',
    dataType: 'html'
}).done(function (response) {
    $('#thonow').html(response);
});

请注意，load() 具有更多的逻辑，因此并非所有 load() 调用都等同于此 ajax() 调用，但在 这种情况下 是相同的。

然而，这并没有真正帮助解决你的问题。因为你的 lbyl 函数 append() 每次一个字符地响应，jQuery 把每个字符视为 Text 节点*，而不是 load() 处理它的 HTML 字符串。这就是为什么你看到输出的是 HTML 字符串，而不是解析后的 HTML 字符串。

^{^{* append() 调用 domManip() 内部函数，而 domManip() 本身调用 jQuery.buildFragment() 函数，如果传递的字符串不像 HTML 字符串，它会创建一个文本节点}}

您真正需要做的是检测响应是“完整页面刷新”还是“逐字响应”。鉴于您的示例响应，您可以通过以下方式实现：

$('#nextButton').click(function(){
  $.ajax({
    url: 'next.php',
    dataType: 'text',
    success: function(result) {
        if (result.slice(0, 15) === '<!DOCTYPE html>') {
            document.write(result);
            document.close();
        } else {
            $('#thonow').html("");
            lbyl('#thonow',result,0,50);
        }
      }
   });
});

请注意，通过AJAX替换整个页面有点“代码异味”。我更愿意将用户重定向到新的URL，或仅替换来自<body>或其后代的页面。