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.

i have 3 questions about this element.

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

回答1:

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>

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>

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

回答2:

A couple of notes:

Instead of assembling data at send time, it's probably convenient to treat the data as an object in the first place. I called it item (it could be record or node or whatever) and I made it bindable so you could pass in a record for editing.
body is generally for sending data that you format yourself. In this, case since you have normal name='value' pairs that you want to access as such in PHP, use params instead. At that point either GET or POST will work (POST is usually better).

Updated example:

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

来源：https://stackoverflow.com/questions/24982090/polymer-form-using-paper-input-and-core-ajax

标签

polymer