微信小程序学习笔记之表单提交与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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 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输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
python3 xpath和requests应用详解
2020/03/06 Python
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
Python的两道面试题
2013/06/29 面试题
工商管理毕业生推荐信
2013/12/24 职场文书
教师对学生的寄语
2014/04/03 职场文书
交通事故协议书范文
2014/04/16 职场文书
授权委托书范文
2014/07/31 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
人事局接收函
2015/01/31 职场文书
同意离婚答辩状
2015/05/22 职场文书
二审答辩状范文
2015/05/22 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP