使用纸张输入和芯轴的聚合物形式 [英] polymer form using paper-input and core-ajax

问题描述

我正在处理一个自定义元素，该元素将作为一种形式使用静态服务将地图节点数据发送到数据库.

i am working on a custom element that will serve as a form for sending map node data to a database using a restful service.

我对此元素有3个问题.

i have 3 questions about this element.

1. 这还可以吗?我正在尝试使用一种从服务器收集数据时似乎与直接数据绑定方法完全相反的方法.可以用来发送到服务器.

1. can this even work? i am trying to use a method which seems exactly the opposite of the direct data binding method when collecting data from a server. can this be used for sending to the server.

，使用的是auto ="false"属性.当用户单击纸张按钮时，我将如何调用go()命令?

in the core-ajax element i am using the auto="false" attribute. how would i go about calling the go() command when a use clicks the paper-button?

如果此发送方法可以工作，提交时如何在php中捕获body ="{}"行?我知道它不是作为$ _GET发送的.是作为$ _POST发送还是我需要使用其他方法来捕获它?

if this method for sending can work how do i catch the body="{}" line in php when submitted? i know it isn't sent as a $_GET. is it sent as $_POST or do i need to use another method to catch it?

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

my element template currently looks like

<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>

推荐答案

它应该可以正常工作.要调用go()，请给您的ajax元素一个id，以便于访问，即

It should work just OK. To invoke the go() give your ajax element an id so it is easy to access, ie

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

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

attach an eventhandler to the button

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

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

and implement the doSend() handler in your elements script section (do not forget to get rid of the noscript in the elements declaration)

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

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

As of proccessing the data at server side - yes, you should look for the data in the $_POST.

这篇关于使用纸张输入和芯轴的聚合物形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！