微信小程序实现用table显示数据库反馈的多条数据功能示例


Posted in Javascript onMay 07, 2019

本文实例讲述了微信小程序实现用table显示数据库反馈的多条数据功能。分享给大家供大家参考,具体如下:

解决了微信小程序自定义表格,并显示的多条数据的问题。

index.wxml

<view>
 <text>我的调查问卷</text>
 <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex">
 <view class="table">
  <view class="tr bg-header">
   <view class="th">姓名</view> 
   <view class="th">性别</view>
   <view class="th">年龄</view>
  </view>
  <view class="tr bg-items" wx:for = "{{items}}" wx:key=""> 
   <text class="td">{{item.name}}</text>
   <text class="td">{{item.gender}}</text>
   <text class="td">{{item.age}}</text>
  </view>
 </view>
 </scroll-view>
 <button bindtap="change">查看我的数据</button>
</view>

index.js

Page({
 /**
  * 页面的初始数据
  */
 data: {
  items:[]//定义变长数组
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function () {
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 },
 change:function(e){
  var that=this;
  wx.request({
   url: 'https://../data.php',//自己的服务器地址
   header: {
    "Content-Type": "application/json"
   },
   method: "POST",
   success: function (res) {
    for (var i = 0, len = res.data.length; i < len; i++){
     that.data.items[i] = res.data[i];
    }
    that.setData({
     items: that.data.items
    })
   },
   fail: function (res) {
    wx.showToast({
     'title': 'request fail'
    })
   }
  })
 }
})

data.php

<?php
$servername = "localhost";
$username = "root";
$password = "***";//数据库连接密码
$dbname = "mydb";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
 die("connect server fail: " . $conn->connect_error);
}
$query = "select * from table";
$result = mysqli_query($conn,$query);
$data = array();
while ($rows = mysqli_fetch_assoc($result))
{
$data[] = $rows;
}
echo json_encode($data);
$conn->close();
?>

文章有借鉴,并非全部自创

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JavaScript 函数调用规则
Sep 14 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 #Javascript
7个好用的JavaScript技巧分享(译)
May 07 #Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 #Javascript
vue搜索和vue模糊搜索代码实例
May 07 #Javascript
详解Vue demo实现商品列表的展示
May 07 #Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 #Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 #Javascript
You might like
基于php缓存的详解
2013/05/15 PHP
浅析php header 跳转
2013/06/17 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
详解vue.js之props传递参数
2017/12/12 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
长青弘远的面试题
2012/06/09 面试题
施工安全标语
2014/06/07 职场文书
精神文明建设标语
2014/06/16 职场文书
优秀党员申报材料
2014/12/18 职场文书
六一亲子活动感想
2015/08/07 职场文书
员工升职自我评价
2019/03/26 职场文书
详解nginx location指令
2022/01/18 Servers