如果重构,则无法重构AJAX调用 - javascript

这是之前的代码:

function getData(query) {
    $.ajax({
        url: "/Api/GetData/" + query,
            success: function (data) {
                var template = $dataTemplate.html();
                var html = Mustache.to_html(template, data);
                $dataField.html(html);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);
            }
        });
}

我使用它将数据绑定到选择字段,并且可以完美地工作,但是现在我将在不同的地方使用相同的代码,因此我决定将调用分隔在不同的文件中,以便可以重复使用。这是重构的AJAX调用:

function getDataApiCall(query) {
    $.ajax({
        url: "/Api/GetData/" + query,
            success: function (data) {
                console.log(data);
                return data;
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);
                return null;
            }
        });
}

现在,这是第一个函数的样子:

function getData(query) {
    var data = getDataApiCall(query);
    if (data != null)
    {
        console.log(data);
        var template = $dataTemplate.html();
        var html = Mustache.to_html(template, data);
        $dataField.html(html);
    }
}

第一个控制台日志未定义,第二个看起来不错,所有数据在那里,但是还有一个__proto__元素,我不知道为什么在那里。因为返回的数组不为空,所以选择被绑定,但是由于某种原因它为空。知道我哪里出错了吗?

同样,在上面键入所有这些内容时,我还记得API调用是异步的(我正在使用API​​的ASP.NET MVC 5),也许与此有关吗?

参考方案

我记得API调用是异步的,也许与它有关?

没错不幸的是,您不能仅从异步调用中返回值,而是必须使用回调,或者可以查看promises。这是一个示例,您可以如何重构代码:

function getDataApiCall(query, onSuccess, onError) {
    $.ajax({
        url: "/Api/GetData/" + query,
            success: function (data) {
                console.log(data);
                onSuccess(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                onError(xhr.responseText);
            }
        });
}


function getData(query) {
    getDataApiCall(query, function(data) {
        if (data != null) {
            console.log(data);
            var template = $dataTemplate.html();
            var html = Mustache.to_html(template, data);
            $dataField.html(html);
        }
    }, function(err) {
        alert(err);
    }
}

html onClick打开url存储在php变量中 - javascript

以下是我的代码,正在获取Uncaught SyntaxError: Unexpected token },但是我的代码中没有看到任何}。 window.open期望用引号引起来的url,我尝试了单引号和双引号的不同组合,但不起作用并且也无法在echo中转义双引号。请帮助谢谢..<?php $a = "https://www.google.co…

div中显示上一页,并显示最后一页数据表 - javascript

我正在尝试转到div中显示的上一页。由于我在上述div中使用ajax打开页面,因此“历史记录后退”方法将不起作用,因为浏览器中未保存任何历史记录。我敢肯定,除了建立一个可打开较旧页面的链接之外,我还可以做些其他事情(这是我目前正在做的事情)。这就是说,因为我通过单击数据表上的一行从page_1.php移到page_2.php,所以我想知道是否有什么办法可以重…

如何安全地将数据从php表单传递到html - javascript

我有一个html格式的登录系统,我需要将用户名和密码发送回php后端,在那里我可以安全地对其进行加密并将其存储在数据库中。我想知道什么是最新和最安全的方法。请记住,这是密码的准系统字符串形式,请务必谨慎以最安全的方式将其返回。我知道$ _GET和$ _POST是非常不安全的。我是否在将javascript数据发送回服务器之前对其进行加密,因此将javascr…

Javascript-从当前网址中删除查询字符串 - javascript

单击提交按钮后,我需要从网址中删除查询字符串值。我可以用jQuery做到这一点吗?当前网址:siteUrl/page.php?key=value 页面提交后:siteUrl/page.php 实际上,我已经从另一个带有查询字符串的页面着陆到当前页面。我需要在页面首次加载时查询字符串值以预填充一些详细信息。但是,一旦我提交了表格,我就需要删除查询字符串值。我已…

laravel如何验证动态添加的元素 - javascript

我的页面上有一个下拉列表选择an action。此选择的名称为action_id。使用可以有许多动作。因此,我添加了一个链接,当用户单击它时,我使用javascript和jquery生成了一个新选择,然后将此新选择添加到了DOM中。此新选择还具有名称action_id。最后,我将有许多名称为action_id的选择。我为您创建了这个jsfiddle来向您展示…