Question

我正在开发一个自定义元素，它将用作使用restful服务将地图节点数据发送到数据库的表单。

我对这个元素有3个问题。

这甚至可以工作吗？我正在尝试使用一种方法，它从服务器收集数据时看起来与直接数据绑定方法完全相反。可以用它来发送到服务器。
我正在使用auto =“false”属性。当用户点击纸质按钮时，我将如何调用go（）命令？
如果这个发送方法可以工作，我如何在提交时在php中捕获body =“{}”行？我知道它不是作为$ _GET发送的。是作为$ _POST发送还是我需要使用另一种方法来捕获它？

我的元素模板目前看起来像

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<polymer-element name="add-node" attributes="url">
  <template>
    <style>
      paper-input {
        color:#000000;
        text-align:left;
      }
      paper-button.colored {
        background:#000000;
        color:#ffffff;
      }
      .centered {
        display:block;
        text-align:center;
        width:100%;
      }
    </style>
    <geo-location latitude="{{lat}}" longitude="{{lng}}"></geo-location>
    <form id="form_1">
      <paper-input floatingLabel label="Name:" value="{{name}}"></paper-input>
      <br>
      <paper-input floatingLabel label="Street Address:" value="{{address}}"></paper-input>
      <br>
      <paper-input floatingLabel label="City" value="{{city}}"></paper-input>
      <br>    
      <paper-input floatingLabel label="State" value="{{state}}"></paper-input>
      <br>
      <paper-input floatingLabel label="Zip" value="{{zip}}"></paper-input>
      <br>
      <paper-input floatingLabel label="Phone:" value="{{phone}}"></paper-input>
      <br>
      <paper-input floatingLabel label="Description:" value="{{description}}"></paper-input>
      <br>
      <div class="centered">
        <paper-button on-tap="{{doSend}}" raisedButton class="colored" label="Save"></paper-button>
      </div>
    </form>
    <core-ajax id="ajax" auto="false" method="POST" contentType="application/json" url="{{url}}"
  body='{"name":"{{name}}", "address":"{{address}}", "city":"{{city}}", "state":"{{state}}", "zip":"{{zip}}",  "phone":"{{phone}}", "description":"{{description}}", "longitude":"{{lng}}", "latitude":"{{lat}}"}' response="{{response}}">
    </core-ajax>
    <template repeat="{{response}}">{{data}}</template>
  </template>
  <script>
    Polymer('add-node', {
      doSend: function(event, detail, sender){
         this.$.ajax.go();
      }
    });
  </script>
</polymer-element>

Answer 1

它应该工作正常。要调用go()，请将ajax元素设为id，以便于访问，即

<core-ajax id="foobar" auto="false" ...></core-ajax>

将事件处理程序附加到按钮

<paper-button ... on-tap="{{doSend}}"></paper-button>

并在元素脚本部分实现doSend()处理程序（不要忘记在元素声明中删除noscript）

<script>
Polymer('add-node', {
  doSend: function(event, detail, sender){
     this.$.foobar.go();
  }
});
</script>

在服务器端处理数据时 - 是的，您应该在$_POST中查找数据。

Answer 2

几点说明：

不是在发送时组装数据，而是首先将数据视为对象可能很方便。我称之为item（可能是record或node或其他），我将其设为可绑定，以便您可以传入记录进行编辑。
body通常用于发送您自行格式化的数据。在这种情况下，由于您希望在PHP中访问正常的 name ='value'对，因此请改用params。在那时，GET或POST都可以工作（POST通常更好）。

更新示例：

<polymer-element name="add-node" attributes="url item">
  <template>
    <style>
      paper-input {
        color:#000000;
        text-align:left;
      }
      paper-button.colored {
        background:#000000;
        color:#ffffff;
      }
      .centered {
        display:block;
        text-align:center;
        width:100%;
      }
    </style>
    <geo-location latitude="{{lat}}" longitude="{{lng}}"></geo-location>
    <form id="form_1">
      <paper-input floatingLabel label="Name:" value="{{item.name}}"></paper-input>
      <br>
      <paper-input floatingLabel label="Street Address:" value="{{item.address}}"></paper-input>
      <br>
      <paper-input floatingLabel label="City" value="{{item.city}}"></paper-input>
      <br>    
      <paper-input floatingLabel label="State" value="{{item.state}}"></paper-input>
      <br>
      <paper-input floatingLabel label="Zip" value="{{item.zip}}"></paper-input>
      <br>
      <paper-input floatingLabel label="Phone:" value="{{item.phone}}"></paper-input>
      <br>
      <paper-input floatingLabel label="Description:" value="{{item.description}}"></paper-input>
      <br>
      <div class="centered">
        <paper-button on-tap="{{doSend}}" raisedButton class="colored" label="Save"></paper-button>
      </div>
    </form>
    <core-ajax id="ajax" method="POST" url="{{url}}" params="{{item}}" response="{{response}}"></core-ajax>
    <template repeat="{{response}}">{{data}}</template>
  </template>
  <script>
    Polymer('add-node', {
      created: function() {
        this.item = {};
      },
      doSend: function() {
        this.$.ajax.go();
      }
    });
  </script>
</polymer-element>

聚合物形式使用纸输入和核心ajax

2 个答案: