我正在try 使用AJAX GET URL来获取同一域名上三个WordPress帖子的帖子内容. 我在脚本中有一个按钮和一个数组中的URL,它可以工作,但所有三个URL都是快速加载到一行中的,我想在每次单击和循环之后逐个获取每个URL,所以四次单击再次从数组的开头开始. 这是我的代码:

<button type="button" class="loadAjax">Get Content</button>
<div id="target"></div>

<script>
    (function ($) { 
$('.loadAjax').click(function(){
var url = ['a-nice-post', 'a-small-gallery', 'a-nice-entry']
for (var i = 0; i < url.length; i++) {
      var link = url[i];
    $.ajax({
        url: link,
             type:'GET',
     success: function(data) {  
        $('#target').html($(data).find('.entry-content').html());
     }
  });
}
});
})(jQuery);
</script>

这里是一个link to my example,当你点击"获取内容"按钮时,你会注意到,内容的开始文本显示的是URL,其余的是Lorem ipsum填充符.还请注意,加载内容的速度很慢,所以在点击按钮后等待几秒钟,我计划在点击后为用户添加一些反馈,但我只想让这里的代码保持简单.

推荐答案

但所有三个URL都会快速加载到一行中

这是因为每次点击按钮时,你都会用for loop来浏览它们--这是理应发生的事情.

您可以修改代码以访问数组中的下一个URL,方法是在每次单击按钮时递增索引,并在索引大于数组中的索引数(数组长度-1)时将其重置为0.

Example code:

(function ($) {
    let url = ['a-nice-post', 'a-small-gallery', 'a-nice-entry'];
    let i = 0;
    $('.loadAjax').click(function () {
        const link = url[i];

        // increment index unless it is greater than total available indexes
        // in which case, reset it back to 0
        // we use a ternary statement here

        i = i === url.length - 1 ? 0 : ++i;

        $.ajax({
            url: link,
            type: 'GET',
            success: function (data) {
                $('#target').html($(data).find('.entry-content').html());
            },
        });
    });
})(jQuery);

Jquery相关问答推荐

JQuery日期 Select 器未设置从jQuery中 Select 的月份起90天或3个月

如何在不使用点击事件 bootstrap 程序模式的情况下使用弹出窗口 bootstrap 程序显示用户详细信息?

如何在for循环期间上传文件

jQuery非只读 Select 器

如何将 JavaScript 对象编码为 JSON?

Jquery Ajax,从 mvc.net 控制器返回成功/错误

组合数组时无法读取未定义的属性推送

JavaScript style.display="none" 还是 jQuery .hide() 更高效?

jQuery:value.attr 不是函数

使用 jQuery DataTables 时禁用第一列的自动排序

如何使用 javascript 擦除所有内联样式并仅保留 css 样式表中指定的样式?

如何在 JavaScript / jQuery 中获取对象的属性?

jQuery : eq() 与 get()

如何使用 javascript 展开和折叠

为什么要定义一个匿名函数并将 jQuery 作为参数传递给它?

检测页面是否已完成加载

使用javascript将HTML页面中的div下载为pdf

请求的资源错误中不存在Access-Control-Allow-Origin标头

更改 url 而不使用 javascript 重定向

如何使用 jQuery 或仅使用 Javascript 将按钮重定向到另一个页面