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

前端之家收集整理的这篇文章主要介绍了聚合物形式使用纸输入和核心ajax前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开发一个自定义元素,它将用作使用restful服务将地图节点数据发送到数据库的表单.

我有3个关于这个元素的问题.

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

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

  1. <link rel="import" href="../bower_components/polymer/polymer.html">
  2. <link rel="import" href="../bower_components/paper-input/paper-input.html">
  3. <link rel="import" href="../bower_components/paper-button/paper-button.html">
  4. <link rel="import" href="../bower_components/core-ajax/core-ajax.html">
  5. <polymer-element name="add-node" attributes="url">
  6. <template>
  7. <style>
  8. paper-input {
  9. color:#000000;
  10. text-align:left;
  11. }
  12. paper-button.colored {
  13. background:#000000;
  14. color:#ffffff;
  15. }
  16. .centered {
  17. display:block;
  18. text-align:center;
  19. width:100%;
  20. }
  21. </style>
  22. <geo-location latitude="{{lat}}" longitude="{{lng}}"></geo-location>
  23. <form id="form_1">
  24. <paper-input floatingLabel label="Name:" value="{{name}}"></paper-input>
  25. <br>
  26. <paper-input floatingLabel label="Street Address:" value="{{address}}"></paper-input>
  27. <br>
  28. <paper-input floatingLabel label="City" value="{{city}}"></paper-input>
  29. <br>
  30. <paper-input floatingLabel label="State" value="{{state}}"></paper-input>
  31. <br>
  32. <paper-input floatingLabel label="Zip" value="{{zip}}"></paper-input>
  33. <br>
  34. <paper-input floatingLabel label="Phone:" value="{{phone}}"></paper-input>
  35. <br>
  36. <paper-input floatingLabel label="Description:" value="{{description}}"></paper-input>
  37. <br>
  38. <div class="centered">
  39. <paper-button on-tap="{{doSend}}" raisedButton class="colored" label="Save"></paper-button>
  40. </div>
  41. </form>
  42. <core-ajax id="ajax" auto="false" method="POST" contentType="application/json" url="{{url}}"
  43. body='{"name":"{{name}}","address":"{{address}}","city":"{{city}}","state":"{{state}}","zip":"{{zip}}","phone":"{{phone}}","description":"{{description}}","longitude":"{{lng}}","latitude":"{{lat}}"}' response="{{response}}">
  44. </core-ajax>
  45. <template repeat="{{response}}">{{data}}</template>
  46. </template>
  47. <script>
  48. Polymer('add-node',{
  49. doSend: function(event,detail,sender){
  50. this.$.ajax.go();
  51. }
  52. });
  53. </script>
  54. </polymer-element>
它应该工作正常.要调用go(),请将ajax元素设为id,以便于访问,即
  1. <core-ajax id="foobar" auto="false" ...></core-ajax>

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

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

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

  1. <script>
  2. Polymer('add-node',{
  3. doSend: function(event,sender){
  4. this.$.foobar.go();
  5. }
  6. });
  7. </script>

在服务器端处理数据时 – 是的,你应该在$_POST中查找数据.

猜你在找的Ajax相关文章