微信小程序实现用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 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
详解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下读取文本文件的代码
2008/07/02 PHP
php在线代理转向代码
2012/05/05 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
js获取url参数值的两种方式
2013/09/10 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
Vue.js用法详解
2017/11/13 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
python简单分割文件的方法
2015/07/30 Python
利用Python获取操作系统信息实例
2016/09/02 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python之Character string(实例讲解)
2017/09/25 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python实现求最长回文子串长度
2018/01/22 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
大学生入党自我鉴定
2013/10/31 职场文书
年度考核自我评价
2014/01/25 职场文书
企业投资意向书
2015/05/09 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server