在Polymer中获取XMLHttpRequest的Response值

时间:2015-05-24 17:35:16

标签: javascript python ajax polymer

我正在使用Polymer和core-ajax将一组变量发送到python / flask后端,然后发送回一个带有x和y值数组的XMLHttpRequest响应(用于绘图)。我不太明白的是如何获取发回给我的response值。以下是我发送信息的方式:

Polymer("add-graphItem",{

    addNewGraph: function () {

        var HeaderName = this.$.graphOptionsLoad.$.headerValue.selectedItem.label;
        var FunctionName = this.$.graphFunctionsLoad.$.functionValue.selectedItem.label;
        console.log("The options are " +HeaderName +" and " +FunctionName);

        var params = {};
        if (this.$.graphOptionsLoad.$.headerValue.selectedItem) {
            params['DataHeader'] = this.$.graphOptionsLoad.$.headerValue.selectedItem.label;
                }
        if (this.$.graphFunctionsLoad.$.functionValue.selectedItem) {
                    params['FunctionName'] = this.$.graphFunctionsLoad.$.functionValue.selectedItem.label;
                }
        this.$.sendOptions.params = JSON.stringify(params);
        var x = this.$.sendOptions.go();
        console.log(x)
    }
})

我在我的控制台中得到的是:

XMLHttpResquest {statusText: "", status: 0, responseURL: "", response:"", responseType:""}
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
onreadystatechange: function () {
ontimeout: null
readyState: 4
response: "{↵ "graph": [↵ {↵ "Header": "MakeModeChange"↵ }, ↵ {↵ "x values": [↵ 0.0, ↵ 131.35, ↵ 26971.3, ↵ 27044.75, ↵ 27351.4, ↵ 27404.483333333334, ↵ 27419.416666666668, ↵ 33128.96666666667, ↵ 33549.13333333333, ↵ 34049.48333333333, ↵ 77464.26666666666, ↵ 77609.71666666666, ↵ 174171.85, ↵ 259166.98333333334↵ ]↵ }, ↵ {↵ "y values": [↵ 1, ↵ 2, ↵ 3, ↵ 4, ↵ 5, ↵ 6, ↵ 7, ↵ 8, ↵ 9, ↵ 10, ↵ 11, ↵ 12, ↵ 13, ↵ 14↵ ]↵ }↵ ]↵}"
responseText: "{↵ "graph": [↵ {↵ "Header": "MakeModeChange"↵ }, ↵ {↵ "x values": [↵ 0.0, ↵ 131.35, ↵ 26971.3, ↵ 27044.75, ↵ 27351.4, ↵ 27404.483333333334, ↵ 27419.416666666668, ↵ 33128.96666666667, ↵ 33549.13333333333, ↵ 34049.48333333333, ↵ 77464.26666666666, ↵ 77609.71666666666, ↵ 174171.85, ↵ 259166.98333333334↵ ]↵ }, ↵ {↵ "y values": [↵ 1, ↵ 2, ↵ 3, ↵ 4, ↵ 5, ↵ 6, ↵ 7, ↵ 8, ↵ 9, ↵ 10, ↵ 11, ↵ 12, ↵ 13, ↵ 14↵ ]↵ }↵ ]↵}"
responseType: ""
responseURL: "http://127.0.0.1:5000/getGraph"
responseXML: null
status: 200
statusText: "OK"
timeout: 0
timeout: 0
upload: XMLHttpRequestUpload
withCredentials: false
__proto__: XMLHttpRequest

有关如何抓取和存储responseresponseText的任何帮助都将非常感谢

2 个答案:

答案 0 :(得分:0)

在core-ajax中,您可以通过访问core-ajax元素来访问您的响应.response

例如,

var coreAjax = document.querySelector('core-ajax');
console.log (coreAjax.response);

要处理core-ajax的响应,而不是添加事件监听器,您还可以使用' on-core-response'属性并传递你的回调函数。

<polymer-element name="test-coreajax">
    <template>
    <core-ajax
        auto
        url="http://gdata.youtube.com/feeds/api/videos/"
        handleAs="json"
        on-core-response="{{handleResponse}}"></core-ajax>

    </template>
    <script>
        Polymer('test-coreajax', {
            //...your other functions
           handleResponse: function() {
               //your code, after callback
          }
        });
    </script>
</polymer-element>

答案 1 :(得分:0)

所以在搜索并修改[此处]找到的代码之后,最终得到了我需要的东西:

this.addEventListener("core-response", 
    function(e) {
        console.log(x.response);
    }
);

这给了我解析的响应如下:

{
  "graph": [
    {
      "Header": "MakeModeChange"
    }, 
    {
      "x values": [
        0.0, 
        131.35, 
        26971.3, 
        27044.75, 
        27351.4, 
        27404.483333333334, 
        27419.416666666668, 
        33128.96666666667, 
        33549.13333333333, 
        34049.48333333333, 
        77464.26666666666, 
        77609.71666666666, 
        174171.85, 
        259166.98333333334
      ]
    }, 
    {
      "y values": [
        1, 
        2, 
        3, 
        4, 
        5, 
        6, 
        7, 
        8, 
        9, 
        10, 
        11, 
        12, 
        13, 
        14
      ]
    }
  ]
}