从 Ajax 方法返回字符串结果

Posted 2023-03-31

【中文标题】从 Ajax 方法返回字符串结果

【英文标题】：Returning String Result from Ajax Method

【发布时间】：2017-03-08 17:02:34

【问题描述】：

我有一个 DoughnutChart 图表，我想更改其关于保存在数据库中的颜色六进制代码部分的颜色我使用此 Ajax 方法通过调用返回 JSON Result 的操作方法来获取颜色字符串，

    getcolors: function getcolors(name) 
    return $.ajax(
        url: "/api/ideas/getcolors",
        data:  name: name ,
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data, textStatus, jqXHR) 
           // return  data;
        ,
        error: function (data) 
          // return  "Failed";
        ,
        async: true
    );

但我没有收到字符串，而是在控制台窗口 中收到 Object readyState: 1

但是，我可以找到存储在 ResponseText 元素中的颜色值。我需要您的帮助，了解如何将颜色值作为字符串获取。

编辑：

为了让事情更清楚，我想调用 ajax 方法来接收颜色字符串，然后我将能够推入图表颜色数组。

getColorArray: function getColorArray(categories) 
        var colors = [];
        for (var i = 0; i < categories.length; i++) 
            console.log(this.getcolors("Risk"));
            //colors.push(this.getcolors(categories[i]));
        

        return colors;
    

【问题讨论】：

不清楚您在控制台中显示的内容是“数据”还是“jqXHR”。我怀疑是后者。您想在成功函数中使用 data 参数。

成功和错误函数无法返回任何内容，因为您返回了 ajax 函数；）通过在 $.ajax 之前删除 return 来修改它，然后再试一次。并且通常在成功函数数据中包含 jqXHR.responseText

@mtizziani 我试图从 ajax 函数中删除返回，但我仍然需要从这个方法返回颜色六进制字符串:) .. 请问你是否可以写一个简单的例子那个？

@MikeS 实际上我没有在成功或错误函数中写任何东西..我所需要的只是从方法中接收颜色六进制字符串。

【参考方案1】：

为什么你的代码是这样的？

success: function (data, textStatus, jqXHR)  
   // return  data;
,

你用过吗？

success: function (data, textStatus, jqXHR) 
   console.log(data);

好的，我明白了。当您使用 ajax 请求时，您将使用异步数据，为此您需要在方法中返回一个 Promise。请尝试使用下面的代码。

getcolors: function getcolors(name) 
    return $.ajax(
       url: "/api/ideas/getcolors",
       data:  name: name ,
       type: "GET",
       contentType: "application/json; charset=utf-8",
       dataType: "json",
    );

为了使用您的功能，请使用以下代码：

getcolors("name").done(function(result)
    console.log(result);
);

或者你可以使用回调

getcolors: function getcolors(name, success, error) 
    return $.ajax(
       url: "/api/ideas/getcolors",
       data:  name: name ,
       type: "GET",
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function(data)
           success(data);
       ,
       error: function(data)
           error(data);
       
    );

... 用于回调：

getcolors("name", function(data)
    //success function
    console.log(data);
, function()
    //Error function
    console.log(data);
)

尝试其中一个选项并告诉结果。

【讨论】：

是的，我确实得到了颜色十六进制代码.. 但我需要将此值传递给另一个 JS 方法来为图表部分着色！

对于第一个解决方案，我尝试按照您编写的操作，但没有收到任何结果，对于第二个解决方案，我收到 Uncaught ReferenceError: data is not defined in the console window.

谢谢 Mateus，您的解决方案在我找到解决方案的过程中帮助了我太多:)。

你能检查一下我的答案吗？ ;)

【参考方案2】：

解决方案

首先，我要感谢 Mateus Koppe 的努力，通过他的解决方案，我找到了解决问题的方法.. 我所做的只是在我的 Ajax 方法中从传入的成功结果中接收到 ResponseText，然后我将它传递给一个回调函数，该函数处理如下结果：

getcolors: function getcolors(name, handleData) 
$.ajax(
    url: "/api/ideas/getcolors",
    data:  name: name ,
    type: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) 
        handleData(data.responseText);
        //return data.responseText;
    ,
    error: function (data) 
        handleData(data.responseText);
        //return data.responseText;
    ,
    async: false
);

然后我使用 getColorArrayModified 循环遍历我的类别列表并填充它自己的颜色。

    getColorArrayModified: function getColorArrayModified(categories) 
    var colors = [];
    for (var i = 0; i < categories.length; i++) 
        this.getcolors(categories[i], function (output) 
            colors.push(output);
        );
    
    return colors;

谢谢大家:)。