微信小程序学习笔记之表单提交与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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
javascript中json基础知识详解
Jan 19 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
原生js调用json方法总结
Feb 22 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
深入理解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读写文件的方法(生成HTML)
2006/11/27 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
php模板原理讲解
2013/11/13 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
js实现购物车功能
2018/06/12 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
Python学生信息管理系统修改版
2018/03/13 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
财务管理职业生涯规划范文
2013/12/27 职场文书
工作自我评价怎么写
2014/01/29 职场文书
学校党员干部承诺书
2015/05/04 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书