微信小程序学习笔记之表单提交与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下通过replace字符串替换实现大小图片切换
May 22 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
如何提高Dom访问速度
Jan 05 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
JS 事件机制完整示例分析
Jan 15 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代码
2013/12/03 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
设定php简写功能的方法
2019/11/28 PHP
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
JS常用函数使用指南
2014/11/23 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
python开启多个子进程并行运行的方法
2015/04/18 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
python中的json总结
2018/10/11 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
法学研究生自我鉴定范文
2013/12/04 职场文书
高一生物教学反思
2014/01/17 职场文书
李开复演讲稿
2014/05/24 职场文书
公司经营目标责任书
2015/01/29 职场文书
圆明园观后感
2015/06/03 职场文书
毕业生入职感言
2015/07/31 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android