Question

我用聚合物制作了一个带有聚合物的cadaster屏幕，我想用用户，密码和电子邮件发送一个JSON。我知道在Polymer中有核心-ajax可以做到，但我不知道如何使这项工作。如果有人可以帮助我。代码如下：

<div class = "cadastro">
  <template id="user-maintenance" is="auto-binding">

<div>
    <paper-input-decorator id="user" label="Usuário" floatinglabel type="text" value="{{user}}" error="Usuário deve conter apenas letras e no mímino 3">
        <input id="user1" type="text" is="core-input" pattern="^[A-Za-z*]{3,}$" required>
    </paper-input-decorator >
</div>

Answer 1

做一个表格我首先为这个例子制作一个聚合物元素，我会称之为＆＃34; my-form＆＃34;。在该元素中，我们将创建一个创建的函数，用于设置我们发送给服务器的对象。下面是一个只有1个输入字段的简单版本，但应该让你知道它是如何工作的。

<polymer-element name="my-form">
  <template>
    <div id="invalid">
      <paper-input-decorator
        id="check"
        floatinglabel
        error="Error!!!"
        label="LABEL">
        <input is="core-input" id="data" required committedValue="{{item.firstItem}}" pattern="^[A-Za-z0-9]+$">
      </paper-input-decorator>
      <br>
      <paper-button
        on-tap="{{checkData}}"
        raised>
        Save
      </paper-button>
    </div>
    <core-ajax
      id="ajax"
      auto="false"
      method="POST"
      url="URL"
      handleas="json"
      params='{{item}}'
      response="{{response}}">
    </core-ajax>
    <paper-toast id="toast"></paper-toast>
  </template>
  <script>
    Polymer('my-form', {
      created: function () {
        // sets up the object 
        this.item = {}; 
      },
      checkData: function () {
          // this function will check data of all inputs in the invalid div to make sure it matches data type and pattern
          var $d = this.$.invalid.querySelectorAll('paper-input-decorator'),
            that = this;
          Array.prototype.forEach.call($d, function (d) {
            d.isInvalid = !d.querySelector('input').validity.valid;
          });
          // the timeout gives time to mark as invalid before checking 
          setTimeout(function () {
            // for each input you are checking you will need another variable and also to add the check to the following if statment
            var invalid = that.$.check.classList.contains("invalid");

            if (!invalid) {
               that.$.ajax.go();
            }
          }, 100);
      },
      responseChanged: function () {
        // do something on response i like to use a paper-toast here alerting the user the data has been accepted or rejected
         this.$.toast.text = response;
         this.$.toast.show();
      }
    });
  </script>
</polymer-element>

如何使用Polymer发布JSON

1 个答案: