/wp-common/products.php?term_id=4&page=1

var currentAjax;
var total = 0;
function getAjaxData(term_id, page = 1) {
currentAjax = $.ajax({
type: "GET",
url: "/wp-common/products.php?term_id=" + term_id + "&page=" + page,
dataType: "json",
success: function (res) {
if (res) {
total = res.total;
if (total > 0) {
var products = res.products;
var subHtml = `
${products.map(
value => `
<li>
<a href="${value.url}">
<div class="img-wrap">
<img src="${value.image}"
alt="${value.alt}">
</div>
<h4>${value.name}</h4>
</a>
</li>`
).join('')}`;
$('.p02-8-s1 .text ul').html(subHtml);
if (total > 1) {
$('.mml-pages').mmlpage(page, total, {
prev: '<i class="fa fa-chevron-left" aria-hidden="true"></i>',
next: '<i class="fa fa-chevron-right" aria-hidden="true"></i>',
href: 'javascript:;',
"click": function (page) {
$('.p02-8-s1 .text ul').empty().html("<li>loading products...</li>");
getAjaxData(term_id,page);
}
});
$('.p02-1-s1 .prev').click(function () {
if (currentAjax) {
currentAjax.abort();
}
$('.p02-8-s1 .text ul').empty().html("<li>loading products...</li>");
page = page > 1 ? page - 1 : 1;
getAjaxData(term_id,page);
});
$('.p02-1-s1 .next').click(function () {
if (currentAjax) {
currentAjax.abort();
}
$('.p02-8-s1 .text ul').empty().html("<li>loading products...</li>");
page = page < total ? page + 1 : total;
getAjaxData(term_id,page);
});
}
if ( total < 1) {
$('.p02-8-s1 .text ul').empty().html("<li>no data</li>");
}
}
}
}
});
}
var term_id = $('.p02-8-s1 .tab .active').attr('data-term_id');
if ($(window).width() <= 540) {
getAjaxData(0, page = 1);
} else {
getAjaxData(term_id, page = 1);
}
$(window).resize(function () {
if ($(window).width() <= 540) {
getAjaxData(0, page = 1);
} else {
getAjaxData(term_id, page = 1);
}
});

后端异步接口url的更多相关文章

  1. layui 富文本 图片上传 后端PHP接口

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/ ...

  2. NodeJS中常见异步接口定义(get、post、jsonp)

    越来越多的人在使用nodeJS,作为一门服务端语言,我们不可避免的要写异步接口(ajax和jsonp).再次强调ajax和jsonp是两个概念,但是由于jquery的封装,使这两种异步接口的调用方式, ...

  3. Python怎么测试异步接口

    当业务处理比较耗时时, 接口一般会采用异步处理的方式, 这种异步处理的方式又叫Future模式. 一般流程 当你请求一个异步接口,接口会立刻返回你一个结果告诉你已经开始处理,结果中一般会包含一个任务i ...

  4. Postman实现数字签名,Session依赖, 接口依赖, 异步接口结果轮询

    Script(JS)为Postman赋予无限可能 基于Postman 6.1.4 Mac Native版 演示结合user_api_demo实现 PS 最近接到任务, 要把几种基本下单接口调试和持续集 ...

  5. Django-Scrapy生成后端json接口

    Django-Scrapy生成后端json接口: 网上的关于django-scrapy的介绍比较少,该博客只在本人查资料的过程中学习的,如果不对之处,希望指出改正: 以后的博客可能不会再出关于djan ...

  6. Python Flask后端异步处理(一)

    Flask是Python中有名的轻量级同步Web框架,但是在实际的开发中,可能会遇到需要长时间处理的任务,此时就需要使用异步的方式来实现,让长时间任务在后台运行,先将本次请求的相应状态返回给前端,不让 ...

  7. 任意文件下载漏洞的接口URL构造分析与讨论

    文件下载接口的URL构造分析与讨论 某学院的文件下载接口 http://www.****.edu.cn/item/filedown.asp?id=76749&Ext=rar&fname ...

  8. 如何使用 Python 编写后端 API 接口

    如何使用 Python 编写后端 API 接口 get API Python3 # coding:utf-8 import json # ModuleNotFoundError: No module ...

  9. 使用egg.js开发后端API接口系统

    什么是Egg.js Egg.js 为企业级框架和应用而生,我们希望由 Egg.js 孕育出更多上层框架,帮助开发团队和开发人员降低开发和维护成本.详细的了解可以参考Egg.js的官网:https:// ...

随机推荐

  1. 浅谈maven自动化构建工具

    转载https://blog.csdn.net/zxm1306192988/article/details/76209062 Maven是什么[what] 1.Maven 是 Apache 软件基金会 ...

  2. EL属性范围用法sessionScope等(转)

    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...

  3. atexit函数学习

    函数名: atexit 头文件:#include<stdlib.h> 功 能: 注册终止函数(即main执行结束后调用的函数) 用 法: void atexit(void (*func)( ...

  4. OC学习篇之---循环引用问题

    在之前的一片文章中,我们介绍了数组操作对象的时候引用问题以及自动释放池的概念: http://blog.csdn.net/jiangwei0910410003/article/details/4192 ...

  5. svn服务端安装、迁移教程、Eclipse切换svn连接库

    svn服务端安装.迁移教程.Eclipse切换svn连接库 安装教程 1.下载svn服务端安装程序 2.运行程序,安装 这里端口号根据自己定义,避免与其他程序冲突 到这里就安装完成 迁移教程 这里举例 ...

  6. $router和router区别

    this.$router.push({path:'/'})//这个是js编程式的一种动态跳转路由方式,是全局的路由对象. 而写在router声明文件中的router是自己定义实例化的一个对象.可以使用 ...

  7. SAS 读取数据文件

    每次读取数据时需要告诉SAS3件事:1:数据存在哪里?2:数据的形式3:创建的数据集的类型(永久/临时) 1 读取SAS数据集 DATA temp; /*temp 为创建的数据集名称*/ INFILE ...

  8. 【进阶技术】一篇文章搞掂:Docker

    注意!!注意系统内存,一开始我使用阿里云1核1G系统,各种问题,搞了几天,原来是内存不足 一.使用VM虚拟机,安装CentOS7.X系统,并安装和使用Docker 1.1.虚拟机安装CentOS7.X ...

  9. SQL Server中char、varchar、text和nchar、nvarchar、ntext的区别 (转)

    转:http://blog.csdn.net/jackychu/article/details/4183118 http://www.cnblogs.com/jhxk/articles/1633578 ...

  10. react jsx 中使用 switch case 示例

    <div> <span>适用平台:</span> <span>{(() => { switch (currentItems.usePlatform ...