小工具      在线工具  汉语词典  css  js  c++  java

LayUI渲染数据失败之Ajax异步交互

前端开发,layui,ajax,交互 额外说明

收录于:158天前

案件

在layui中调用jquery的ajxa,返回数据,赋值给全局变量,通过DOM渲染到页面。

//定义变量
let sale;

//定义请求
$.ajax({
    
    type: "GET",
    url: "http://localhost:8080/product/sale",
    data: null,
    dataType: "json",
    success: function (data) {
    
        console.log(data)
        //全局变量赋值
        sale = data
    }
});

document.getElementById("saleData") = sale

根据js单线程执行,页面上会出现数据,但事实是这样的

在这里插入图片描述
在这里插入图片描述
查了资料才知道:

  1. JS执行机制是单线程的。但它不必逐行执行。
  2. JS执行分为同步任务和异步任务。

按照这种分类方法,JS的执行流程为:

首先,判断JS是同步还是异步,同步进入主线程,异步进入Event table(相当于等待队列)

其次,异步任务在事件表中注册一个函数。当满足某些条件时,它被推入事件队列。

最后进入主线程后就会执行同步任务。直到主线程空闲时,才会去Event队列中查看是否有可执行的异步任务。如果有,就会推送到主线程执行。

也就是说,执行js时,首先判断是同步任务还是异步任务。异步任务等待就绪队列,先执行同步任务。

JS同步执行、异步执行

浏览器加载 HTML、JS 和 CSS 的顺序

Ajax默认是异步任务,默认延迟执行。

//定义变量
let sale;

console.log(1)

//定义请求
$.ajax({
    
    type: "GET",
    url: "http://localhost:8080/product/sale",
    data: null,
    dataType: "json",
    success: function (data) {
    
        console.log(data)
        //全局变量赋值
        sale = data
        console.log(2)
    }
});

console.log(sale)
document.getElementById("saleData").innerText = sale
console.log(3)

在这里插入图片描述
如图可以看出ajax是最后执行的,而此时表格和内容都已渲染好了再赋值就没有意义了。那么如何赋值呢?

  • 将ajxa改为同步任务(不推荐)

  • 将渲染方法放在Ajax内部进行异步执行


console.log(1)

//定义请求
$.ajax({
    
    type: "GET",
    url: "http://localhost:8080/product/sale",
    data: null,
    dataType: "json",
    success: function (data) {
    
        //console.log(data)
        updateSaleData(data)
        console.log(2)
    }
});

function updateSaleData(vo){
    
    document.getElementById("saleData").innerText = vo
}

console.log(3)

在这里插入图片描述
在这里插入图片描述

. . .

相关推荐

额外说明

IDEA - 如何查看一个类的其他子类

查看父类下其他子类继承关系 1、选中类名,右键选择Diagrams。 2、选择需要查看的父类,右键选择show Implementations。 3、在弹出的所有子类中,ctrl + A选中所有回车即可。 然后可以生成如下所示的图谱: 更好的查看类上的注

额外说明

nginx-图片配置png格式乱码解决办法

nginx配置项 [root@VM-0-13-centos conf.d]# cat sm-image.conf server { listen 443 ssl; listen [::]:443 ssl;

额外说明

Java官方文档:创建线程的两种方式及其优缺点分析

简介 根据Oracle官方文档介绍,Java提供了两种线程的创建方法,第一种是继承Thread类;第二种是实现Runable接口,并将Runnable实例传递给Thread类。Oracle官方文档介绍如下: 一. 继承Thread类,重写Run方法的方式

额外说明

Qt 1.按键QPushButton和文本框QTextEdit

//ex2.cpp #include "ex2.h" #include "ui_ex2.h" int static cnt = 0; Ex2::Ex2(QWidget *parent) : QDialog(parent) , ui(n

额外说明

Linux本地搭建GitLab服务器 - 内网穿透远程访问

文章目录 前言 1. 下载Gitlab 2. 安装Gitlab 3. 启动Gitlab 4. 安装cpolar内网穿透 5. 创建隧道配置访问地址 6. 固定GitLab访问地址 6.1 保留二级子域名 6.2 配置二级子域名 7. 测试访问二级子域名

额外说明

JVM系列 运行时数据区

系列文章目录 第一章 运行区实验 文章目录 系列文章目录 前言 一、堆(Heap) 1.1、新生代/Young区 1.1.1、Eden区 1.1.2、Survival区 1.2、年老代(old区) 二、虚拟机栈(Stack) 2.1、栈顶缓存技术 2.2

额外说明

CentOS源码编译安装nginx

CentOS编译安装Nginx 安装环境: # cat /etc/redhat-release CentOS Linux release 7.8.2003 (Core) 安装Development Tools yum groupinstall -y

额外说明

checkstyle安装、配置、使用

文章目录 android studio(intellij)中安装使用 eclipse中安装使用 命令行中使用 良好的代码格式方便阅读,利于多人维护,避免格式化代码后差异太多。 android studio默认配置格式化后,基本满足我们的格式要求。 下面是

额外说明

Java数据类型----基本数据类型

一、数据类型 数据类型在计算机语言里面,可以理解为针对内存的一种抽象的表达方式。不同类型的变量在内存中分配的字节数不同,同时存储方式也是不同的。 二、Java基本数据类型 Java是强类型语言,所以Java对于数据类型的规范会相对严格。数据类型可以说是语

额外说明

Windows系统缺少mfc71ud.dll文件导致程序无法运行问题

其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下载这个mfc71ud.dll文件(

ads via 小工具