微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解


Posted in Javascript onMarch 28, 2019

本文实例讲述了微信小程序学习笔记之表单提交与PHP后台数据交互处理。分享给大家供大家参考,具体如下:

前面一篇结介绍了微信小程序函数定义、页面渲染。这里介绍form表单提交与后台php数据交互处理。

【form表单提交】

form.wxml:

<form bindsubmit="formSubmit" bindreset="formReset">
 <view>
  昵称:<input type="text" name="nickname" placeholder="请输入昵称" confirm-type="done" />
  密码:<input password type="number" name="password" placeholder="请输入6位密码" maxlength="6" />
  性别:
  <radio-group name="sex">
   <label><radio value="女"/>女</label>
   <label><radio value="男"/>男</label>
  </radio-group>
  爱好:
  <checkbox-group name="aihao">
   <label><checkbox value="cy"/>抽烟</label>
   <label><checkbox value="hj"/>喝酒</label>
   <label><checkbox value="tt"/>烫头</label>
  </checkbox-group>
  状态:<switch name="status"/>
  <view>成绩:<slider name="grade" show-value ></slider></view>
 </view>

 <view class="btn-area">
  <button formType="submit">提交</button>
  <button formType="reset">重置</button>
 </view>
</form>

form.js:

Page({
 formSubmit: function (e) {
  console.log('form发生了submit事件,提交数据:', e.detail.value)
 },
 formReset: function () {
  console.log('form发生了reset事件')
 }
})

提交触发formSubmit:

微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

重置触发formReset:

微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

【表单数据提交到PHP后台服务器】

使用 wx.request API发送HTTPS请求

前台form.js:

Page({
 formSubmit: function (e) {
  wx.request({
   url: 'https://www.msllws.top/getdata.php',
   data: {
    'nickname': e.detail.value.nickname,
    'password': e.detail.value.password,
    'sex': e.detail.value.sex,
    'status': e.detail.value.status,
    'aihao': e.detail.value.aihao,
    'grade': e.detail.value.grade
   },
   method:'POST',
   header: {
    'Content-Type': 'application/x-www-form-urlencoded'
   },
   success: function (res) {
    console.log(res.data)
   }
  })
 }
})

后台接口getdata.php:

<?php 
  $postdata = $_POST; //获得POST请求提交的数据

  //打印日志 方便查看
  $fp = fopen('./log.txt','a+');  
  fwrite($fp,var_export($postdata,true));  
  fclose($fp);
 
  echo 666; //返回状态或数据

提交后日志文件log.txt内容如下,这些就是PHP后台获得的数据,可以对其进行数据库操作:

array (
 'nickname' => '李栋',
 'password' => '123456',
 'sex' => '男',
 'status' => 'true',
 'aihao' => 'cy,hj,tt',
 'grade' => '66',
)
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

【PHP后台对提交过来的数据进行判断、处理,返回状态,前台小程序给出提示】

示例如下,如果输入名字提示提交成功,不输入名字提示名字为空。

后台接口getdata.php:

<?php 
  $postdata = $_POST;
  $fp = fopen('./log.txt','a+');  
  fwrite($fp,var_export($postdata,true));  
  fclose($fp); 

  if($postdata['nickname']){
	$arr['state'] = 1;
	$arr['info'] = '提交成功';
  }else{
	$arr['state'] = 0;
	$arr['info'] = '名字为空';
  }
  echo json_encode($arr);die;

前台form.js:

Page({
 formSubmit: function (e) {
  wx.request({
   url: 'https://www.msllws.top/getdata.php',
   data: {
    'nickname': e.detail.value.nickname,
    'password': e.detail.value.password,
    'sex': e.detail.value.sex,
    'status': e.detail.value.status,
    'aihao': e.detail.value.aihao,
    'grade': e.detail.value.grade
   },
   method: 'POST',
   header: {
    'Content-Type': 'application/x-www-form-urlencoded'
   },
   success: function (res) {
    if (res.data.state == 1) {
     wx.showToast({
      title: res.data.info
     });
    }else{
     wx.showToast({
      title: res.data.info
     });
    }
   }
  })
 }
})

微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

【请求PHP后台API接口,获得数据,渲染页面】

示例如下,获得10条博客信息显示在页面中(接口用tp5写的,普通php文件用echo json_encode();返回数据)。

后台接口Getdata.php:

<?php
namespace app\home\controller;

use think\Controller;
class Getdata extends Controller
{
  public function index()
  { 
    //查询10篇博客
    $whe['is_del'] = 'N';
    $artinfo = db('article')->field('`article_id`,`article_title`,`thumbnail`')->where($whe)->limit(10)->select();
    //拼接缩略图路径
    foreach ($artinfo as $k => $v) {
      $artinfo[$k]['thumbnail'] = 'https://www.msllws.top'.$v['thumbnail'];
    }
    return json($artinfo);
  }
}

前台data.js:

Page({
 onLoad: function () {
  var that = this
  wx.request({
   url: 'https://www.msllws.top/Getdata',
   headers: {
    'Content-Type': 'application/json'
   },
   success: function (res) {
    that.setData({
     artinfo: res.data
    })
   }
  })
 }
})

前台data.wxml:

<view wx:for="{{artinfo}}" wx:for-item="artinfo">
  <view>{{artinfo.article_title}}</view>
  <image src="{{artinfo.thumbnail}}"></image>
</view>

页面加载,显示如下:

微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

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

Javascript 相关文章推荐
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
JS高级运动实例分析
Dec 20 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
webpack优化的深入理解
Dec 10 Javascript
Javascript执行流程细节原理解析
May 14 Javascript
深入理解es6块级作用域的使用
Mar 28 #Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 #Javascript
详解React服务端渲染从入门到精通
Mar 28 #Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 #Javascript
JavaScript刷新页面的几种方法总结
Mar 28 #Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 #Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 #Javascript
You might like
php导出CSV抽象类实例
2014/09/24 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
javascript实现滚轮轮播图片
2020/12/13 Javascript
python django 实现验证码的功能实例代码
2017/05/18 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
高中生期末评语
2014/01/28 职场文书
高三生物教学反思
2016/02/22 职场文书
2019银行竞聘书
2019/06/21 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python