javascript - 将 jvectormap 连接到 ajax 访问的数据库

Question

我有这个问题:

Javascript 声明:

var OCUPARE_CULOARE = 
jQuery.ajax({
            type: 'post',
            url: '/wp-content/themes/seopress/VerifiOcupareHARTA.php',
            dataType: 'json',
            data : {data : codparcela},
            success: function(response) {
            var   OCUPARE_CULOARE1 =  JSON.stringify(response);
            alert (OCUPARE_CULOARE1); 

            }
      });
var ALAAA = JSON.stringify(OCUPARE_CULOARE);
console.log (OCUPARE_CULOARE);
console.log (ALAAA);

PHP 文件:

 <?php
 $res9= $_POST['data'];
 global $wpdb;
 $ocupate = $wpdb -> get_results("SELECT Cod FROM Ocupare_Cimitir WHERE Cod 
 LIKE  '$res9%'");
 echo (json_encode($ocupate));?>

主要问题是我想将 php(json 格式)的响应归因于 javascript 中的变量。

结果:

1) “console.log(OCUPARE_CULOARE)”返回:{readyState: 1, setRequestHeader: ▪, getAllResponseHeaders: ▪, getResponseHeader: ▪, overrideMimeType: ▪, …}

2) “console.log (ALAAA);”返回:{“readyState”:1}

3) "alert (OCUPARE_CULOARE1); "返回正是我想要的，将其放入 javascript 中的变量中:[{"Cod":"F01R01L02"},{"Cod":"F01R01L10"},{"编码":"F01R01L12"},{"编码":"F01R01L13"},{"编码":"F01R01L15"},{"编码":"F01R02L12"},{"编码":"F01R10L10"}]

抱歉，如果这个问题太简单了，但对我来说不是。

在过去的两天里，我读到了有关 ajax 异步调用的内容，我真的无法让它工作。

Answer 1

问题是ajax调用是异步的。这意味着即使调用尚未完成，也会继续执行 ajax 调用后的代码。

解决方案1(回调)

回调用于告诉异步操作在异步操作完成后应该执行什么。

function getDataFromServer(callback) {
    jQuery.ajax({
        type: 'post',
        url: '/wp-content/themes/seopress/VerifiOcupareHARTA.php',
        dataType: 'json',
        data : {data : codparcela},
        success: function (response) {
            callback(JSON.stringify(response))
        }
    });
}

getDataFromServer(function (OCUPARE_CULOARE1) {
    alert(OCUPARE_CULOARE1);
});

解决方案 2( promise )

尽管使用 Promise 的解决方案看起来更加冗长，但它很快就会得到返回，因为它可以轻松组合异步函数。

function getDataFromServer() {
    return new Promise(function (resolve, reject) {
        jQuery.ajax({
            type: 'post',
            url: '/wp-content/themes/seopress/VerifiOcupareHARTA.php',
            dataType: 'json',
            data : {data : codparcela},
            success: function (response) {
                resolve(JSON.stringify(response));
            }
        });
    });
}

getDataFromServer().then(function (OCUPARE_CULOARE1) {
    alert(OCUPARE_CULOARE1);
});

解决方案 3(异步/等待)

如果您不需要支持多种浏览器(特别是旧浏览器)，async/await 可以是一个选项。它看起来更干净，并且可以与 Promise 进行互操作。请注意，您只能在 async 函数中使用 wait，这就是为什么在我的示例中我添加了函数 doSomething。

async function getDataFromServer() {
    return new Promise(function (resolve, reject) {
        jQuery.ajax({
            type: 'post',
            url: '/wp-content/themes/seopress/VerifiOcupareHARTA.php',
            dataType: 'json',
            data : {data : codparcela},
            success: function (response) {
                resolve(JSON.stringify(response));
            }
        });
    });
}

async function doSomething() {
    const OCUPARE_CULOARE1 = await getDataFromServer();
    alert(OCUPARE_CULOARE1);
}

doSomething();