微信小程序学习笔记之表单提交与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语言中的Literal Syntax特性分析
Mar 08 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
javaScript语法总结
Nov 25 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 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&amp;&amp;mysql)三
2006/10/09 PHP
function.inc.php超越php
2006/12/09 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
jquery删除指定子元素代码实例
2015/01/13 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
js实现计算器功能
2020/08/10 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
微信小程序实现简单购物车功能
2020/12/30 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
python实现多张图片拼接成大图
2019/01/15 Python
通过python爬虫赚钱的方法
2019/01/29 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
新闻发布会主持词
2014/03/28 职场文书
考博专家推荐信
2014/05/10 职场文书
小学领导班子对照材料
2014/08/23 职场文书
表扬稿范文
2015/01/17 职场文书