Jquery在executeSQL之前等待JSON对象的返回答案

【问题标题】：Jquery wait for return of JSON object before executeSQLJquery在executeSQL之前等待JSON对象的返回
【发布时间】：2016-12-12 16:04:42
【问题描述】：

在下面的函数中，我如何告诉 JS 在继续执行 sql 事务之前等待我的 ajax 调用返回。以下示例代码当前正确获取数据，但是在AJAX调用填充我的employees []之前执行了sql事务@

我尝试在成功后进行sql操作，但出现以下错误

Uncaught DOMException: Failed to execute 'executeSql' on 'SQLTransaction': SQL execution is disallowed.

这是部分代码

var addSampleData = function (tx, employees) {

        var employees = [];

$.ajax({
            url: 'my-path-to-my-json-answer',
            success: function (value, status) {
            employees.push(value);
        },
        error: function (XMLHttpRequest, textStatus, exception) {
            console.log("Connection with the server fail.\n" + textStatus + 'status is: ' + exception);
        }
    });

        var l = employees.length;

        var sql = "INSERT OR REPLACE INTO leaderboard " +
        "(id, uFname, uLname, uRegion, uCountry, uScore) " +
        "VALUES (?,?,?,?,?,?)";

        var e;

        for (var i = 0; i < l; i = i + 1) {
            e = employees[i];
            tx.executeSql(sql, [e.id, e.uFname, e.uLname, e.uRegion, e.uCountry, e.uScore],
                function () {
                    console.log('INSERT success');
                },
                function (tx, error) {
                    console.log('INSERT error: ' + error.message);
                });
        }   

    }

欢迎任何改进该代码的建议。

【问题讨论】：

使用 .done 搜索 jquery 的 promise 语法
从“成功”函数触发 SQL 调用（直接在函数中编写代码，或者调用另一个运行查询的函数）。此回调仅在从服务器收到响应后执行。 Ajax 是异步的。从概念上讲，您不能“告诉其他代码等待”，您可以简单地“在 ajax 完成之前不执行它” - 唯一的方法是通过“成功”回调（或者通过 .done() 如果你使用 Promise 接口）。
除上述之外：为什么要重新定义参数employee？您还应该考虑this，具体取决于您的整个应用程序的行为方式。
好点 @Ceredig，员工 var 不应作为函数中的参数传递。代码现在可以工作了，因为我在成功后执行了我的 websql 事务。

标签： javascript jquery json ajax web-sql

【解决方案1】：

这是因为 Ajax 调用是异步的，并且浏览器为 ajax 调用启动了一个单独的线程。为了在ajax调用完成后执行你的SQL查询，把你想要的SQL查询代码放在ajax的success方法中，如下...

jQuery.ajax({
        type:"post",
        dataType:"json",
        url: myAjax.ajaxurl,
        data: {action: 'submit_data', info: info},
        success: function(data) {
            //do your SQL work here...
            console.log('doing SQL work');
        },
        error: function(data) {
           console.log('boo...boo...');
        },
    });

【讨论】：