聚合物 iron-ajax：如何将输入元素中的数据绑定到 Iron-ajax 的 body 属性答案

【问题标题】：polymer iron-ajax : How to Bind data from input element to iron-ajax's body attribute聚合物 iron-ajax：如何将输入元素中的数据绑定到 Iron-ajax 的 body 属性
【发布时间】：2015-07-29 11:41:51
【问题描述】：

我最近遇到了将数据从输入元素绑定到 iron-ajax 的“body”属性的问题。当我在聚合物 0.5 上使用 core-ajax 时，我可以轻松地绑定如下值：

<core-ajax
           id="ajax"
           method="POST" 
           contentType="application/json"
           url="{{url}}"   
           body='{"username":"{{username}}", "password":"{{password}}"}'
           handleAs="json"
           on-core-response="{{responseHandler}}">
</core-ajax>

现在我用 Iron-ajax 尝试了同样的事情。但它实际上发送的是“{{username}}”和“{{password}}”而不是它们的值。代码如下：

<iron-ajax
           id="ajax"
           method="POST" 
           contentType="application/json"
           url="{{url}}"   
           body='{"username":"{{username}}", "password":"{{password}}"}'
           handle-as="json"
           on-response="responseHandler">
</iron-ajax>

如何让它发挥作用？谢谢你的回答:)

【问题讨论】：

标签： javascript html ajax polymer

【解决方案1】：

您可以为 ajax 主体声明一个计算属性。像这样

properties: {
    ...
    ajaxBody: {
        type: String,
        computed: 'processBody(username, password)'
    }
},
processBody: function(username, password) {
    return JSON.stringify({username: username, password:password});
}

然后在 Iron-ajax 上添加它

<iron-ajax ... body="{{ajaxBody}}"></iron-ajax>

【讨论】：

这也适用于计算params 属性。但是在这种情况下，您希望返回 Object 而不是字符串。
不错的答案，使用属性而不是函数直接允许在参数更改时再次执行调用......在这里可能没有用，但在其他一些情况下它是有用的。
这会导致 processBody 在输入字段中的每一次更改时被调用，而不是在请求序列化时计算。

【解决方案2】：

另一种选择是使用Computed Bindings

您的代码将如下所示：

<iron-ajax
       ...
       body="{{getAjaxBody(username, password}}}"
       >
</iron-ajax>
<script>
Polymer({
  .....
  getAjaxBody: function(username, password) {
    return JSON.stringify({username: username, password: password});
  }
})
</script>

【讨论】：

使用nez Polymer，但语法改为body="[[getAjaxBody(username, password)]]"