feedback.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>反馈</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" href="../css/mui.min.css">
  10. <style>
  11. html {
  12. background-color: #efeff4;
  13. }
  14. .title {
  15. margin: 20px 15px 10px;
  16. color: #6d6d72;
  17. font-size: 15px;
  18. }
  19. .mui-placeholder {
  20. text-align: left !important;
  21. padding-left: 5% !important;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <header class="mui-bar mui-bar-nav">
  27. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  28. <h1 class="mui-center mui-title">问题反馈</h1>
  29. </header>
  30. <div class="mui-content">
  31. <div class="mui-page-content">
  32. <p>问题和意见</p>
  33. <div class="row mui-input-row">
  34. <textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
  35. </div>
  36. <p>QQ/邮箱</p>
  37. <div class="mui-input-row">
  38. <input id='contact' type="text" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
  39. </div>
  40. <ul class="mui-table-view" style="margin-top: 25px;">
  41. <li class="mui-table-view-cell">
  42. <a id="submit" style="text-align: center;color: green;">
  43. 提交
  44. </a>
  45. </li>
  46. </ul>
  47. </div>
  48. </div>
  49. </body>
  50. <!--
  51. 作者:HZC
  52. 时间:2015-08-26
  53. 描述:反馈
  54. -->
  55. <script src="../js/mui.min.js"></script>
  56. <script type="text/javascript">
  57. mui.init();
  58. mui.plusReady(function() {
  59. tijiao()
  60. });
  61. /**
  62. * 提交反馈信息
  63. */
  64. function tijiao() {
  65. document.getElementById("submit").addEventListener('tap', function() {
  66. var question = document.getElementById("question").value.replace(/(^\s*)|(\s*$)/g,'');
  67. if(question == '') {
  68. mui.toast('请填写问题和意见');
  69. return;
  70. }
  71. var contact = document.getElementById("contact").value;
  72. mui.ajax('http://oltop.cn:8000/api/feedback', {
  73. data: {
  74. post: {
  75. question: question,
  76. contact: contact
  77. }
  78. },
  79. dataType: 'json', //服务器返回json格式数据
  80. type: 'POST', //HTTP请求类型
  81. timeout: 10000, //超时时间设置为10秒;
  82. success: function(data) {
  83. mui.toast('反馈信息已提交');
  84. document.getElementById("question").value = '';
  85. document.getElementById('contact').value = '';
  86. },
  87. error: function(xht, type, errorThrown) {
  88. mui.toast('系统错误,请稍候再试');
  89. }
  90. });
  91. });
  92. }
  93. </script>
  94. </html>