开发中遇到js代码和Ajax请求在一起时调用顺序（async属性）

最新推荐文章于 2024-04-26 17:07:18 发布

帅气的刘某人

最新推荐文章于 2024-04-26 17:07:18 发布

阅读量539

点赞数 1

分类专栏： html技术文章标签： ajax js

本文链接：https://blog.csdn.net/qq_41581154/article/details/109587869

版权

html技术专栏收录该内容

19 篇文章 1 订阅

订阅专栏

问题描述：

初始化了全局变量，先调用ajax方法，在方法中给全局变量赋值，然后结束ajax方法，拿到全局变量进行操作。大致的代码如下，

我发现执行完test方法后，明明给全局变量赋值了，但是这个方法是最后执行的，全局变量不是自己理想的值。（执行顺序如下图）

问题代码简易实现：

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>hh111h</head>
<script src="../js/jquery-1.9.1.js"></script>
<script src="../js/test.js"></script>
<body>
<form id="" method="post" action="/getParam">
    姓名：<input type="text" name="xm" id="xm">
    <button type="submit">提交</button>

</form>
<button type="button" onclick="clickButton()">点击按钮1</button>
<script>

    var allValue = "";

    function clickButton() {
        console.log("clickButton刚进入"+allValue);
        //$("#xm").val(allValue);
        console.log("clickButton刚进入input内容：-》"+$("#xm").val())
        test();
        console.log("clickButton结束时："+allValue);
        //$("#xm").val(allValue);
        console.log("clickButton结束时赋值完毕-》"+$("#xm").val())

    }
</script>
</body>
</html>

function test(){
    console.log("进入test->"+allValue);
    $.ajax({
        url:'/testAjax',
        type: 'post',
        success: function (data) {
            allValue=data
            console.log("success:->"+allValue)
            $("#xm").val(allValue);
        }
    });
    console.log("完成ajax，准备退出->"+allValue);
}

问题代码的执行顺序：

这个时候我们会发现Ajax请求好像是最后执行的

知识点：Ajax的async

1：async是ajax的同步和异步，为false时，当js代码遇到Ajax请求，会进行等待，等执行完之后再进行后续的代码，顺序便是由上往下的正常执行。

2：为true时（默认）便是异步操作，在请求的时候，当执行ajax请求后台的时候，前台便不会等待，接着执行js代码，等后台给参数了，才继续执行ajax中的代码。

所以想要解决这个问题，想按照我的逻辑来执行这个方法，需要实行同步请求：

function test(){
    console.log("进入test->"+allValue);
    $.ajax({
        url:'/testAjax',
        type: 'post',
        async:false,
        success: function (data) {
            allValue=data
            console.log("success:->"+allValue)
            $("#xm").val(allValue);
        }
    });
    console.log("完成ajax，准备退出->"+allValue);
}

帅气的刘某人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
开发中遇到js代码和Ajax请求在一起时调用顺序（async属性）

目录问题描述：问题代码简易实现：问题代码的执行顺序：知识点：Ajax的async问题描述：初始化了全局变量，先调用ajax方法，在方法中给全局变量赋值，然后结束ajax方法，拿到全局变量进行操作。大致的代码如下，我发现执行完test方法后，明明给全局变量赋值了，但是这个方法是最后执行的，全局变量不是自己理想的值。（执行顺序如下图）问题代码简易实现：<%@ page language="java" pageEncoding="UTF-8"%&g...
复制链接

扫一扫