微信小程序 PHP后端form表单提交实例详解


Posted in Javascript onJanuary 12, 2017

微信小程序 PHP后端form表单

1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSON的形式返回给小程序。

2.昨天写了登录注册、忘记密码功能,他们实质上都是一个表单提交操作。因此就拿注册功能来写这个例子。

3.目录图

  1. js文件是逻辑控制,主要是它发送请求和接收数据,
  2. json 用于此页面局部 配置并且覆盖全局app.json配置,
  3. wxss用于页面的样式设置,
  4. wxml就是页面,相当于html

4.样式和json文件暂时不管了,我只是想回顾一下form表单的提交

5.Wxml文件代码

<view class="load-head">

  <image src="../../images/return.png" />

  注册

</view>

<view class="login">

  <form bindsubmit="formSubmit">

    <view class="field clearfix">

      <label for="name"><image src="../../images/phone.png" /></label>

      <input id="name" name="mobile" class="login-input" type="text" placeholder="请输入手机号" />

    </view>

    <view class="field clearfix">

      <label for="password"><image src="../../images/code.png" /></label>

      <input id="password" class="login-input" type="password" placeholder="请输入验证码" />

      <button class="get-code" hover-class="code-hover">获取验证码</button>

    </view>

    <view class="field clearfix">

      <label for="password"><image src="../../images/password.png" /></label>

      <input id="password" name="password" class="login-input" type="password" placeholder="请设置6-20位登录密码" />

    </view>

    <view class="field clearfix">

      <label for="repassword"><image src="../../images/password.png" /></label>

      <input id="repassword" name="repassword" class="login-input" type="password" placeholder="请输入确认密码" />

    </view>

    

    <button class="btn_login" formType="submit">注册</button>

  </form>

  <view class="reg_forget clearfix">

    <navigator url="../login/index" class="btn_reg">登录</navigator>

    <navigator url="../forget/index" class="btn_forget">忘记密码</navigator>

  </view >

  

</view>

 6.其中几个关键点需要理解

a.Form表单,需要绑定一个submit事件,在小程序中,属性为bindsubmit,

bindsubmit=”formSubmit”   这里的属性值formSubmit,命名可以为符合规范的任意值,相当于以前html中的  onsubmit=”formSubmit()”,是一个函数名,当提交的时候触发formSubmit这个函数事件,这个函数写在js中。

b.其他的属性和之前的HTML差不多,注意的是,表单一定要有name=“value”,后端处理和以前一样,比如name=”username” PHP可以用 $_POST[‘username']来接收。

C.由于小程序没有input submit这个按钮,所以在每个form表单中都要有一个提交按钮,

<button formType="submit">注册</button>,这个按钮就是用来开启提交事件的。

7.index.js代码

Page({

 data: {

  

 },

 formSubmit: function(e) { 

  if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){

   wx.showToast({

    title: '手机号码或密码不得为空!',

    icon: 'loading',

    duration: 1500

   })

   setTimeout(function(){

     wx.hideToast()

    },2000)

  }else if(e.detail.value.mobile.length != 11){

    wx.showToast({

    title: '请输入11位手机号码!',

    icon: 'loading',

    duration: 1500

   })

   setTimeout(function(){

     wx.hideToast()

    },2000)

  }else if(e.detail.value.password.length <6 ||e.detail.value.password.length>20){

    wx.showToast({

    title: '请输入6-20密码!',

    icon: 'loading',

    duration: 1500

   })

   setTimeout(function(){

     wx.hideToast()

    },2000)

  }else if(e.detail.value.password != e.detail.value.repassword){

    wx.showToast({

    title: '两次密码输入不一致!',

    icon: 'loading',

    duration: 1500

   })

   setTimeout(function(){

     wx.hideToast()

    },2000)

  }else{


   wx.request({ 

      url: 'https://shop.yunapply.com/home/Login/register', 

      header: { 

       "Content-Type": "application/x-www-form-urlencoded" 

      },

      method: "POST",

      data:{mobile:e.detail.value.mobile,password:e.detail.value.password},

      success: function(res) {

       if(res.data.status == 0){

         wx.showToast({

          title: res.data.info,

          icon: 'loading',

          duration: 1500

         })

       }else{

         wx.showToast({

          title: res.data.info,//这里打印出登录成功

          icon: 'success',

          duration: 1000

         })

       }

      } 

     })

  }

 }, 

})

8.需要注意的是

Page()这个方法是必须有的,里面放置js对象,用于页面加载的时候,呈现效果

data: {},数据对象,设置页面中的数据,前端可以通过读取这个对象里面的数据来显示出来。

formSubmit: function  小程序中方法都是 方法名:function(),其中function可以传入一个参数,作为触发当前时间的对象

下面是函数的执行,由于验证太多,我只拿一部分出来理解。

if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){

   wx.showToast({

    title: '手机号码或密码不得为空!',

    icon: 'loading',

    duration: 1500

   })

 这里的e,就是当前触发事件的对象,类似于html onclick=“foo(this)”this对象,小程序封装了许多内置的调用方法,e.detail.value.mobile 就是当前对象name=”mobile”的对象的值e.detail.value.mobile.length就是这个值的长度

 showToast类似于JS中的alert,弹出框,title  是弹出框的显示的信息,icon是弹出框的图标状态,目前只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。 

9.重点来了

wx.request({ 

      url: 'https://shop.com/home/Login/register', 

      header: { 

       "Content-Type": "application/x-www-form-urlencoded" 

      },

      method: "POST",

      data:{mobile:e.detail.value.mobile,password:e.detail.value.password},

      success: function(res) {

       if(res.data.status == 0){

         wx.showToast({

          title: res.data.info,

          icon: 'loading',

          duration: 1500

         })

       }else{

         wx.showToast({

          title: res.data.info,//这里打印出登录成功

          icon: 'success',

          duration: 1000

         })

       }

      },

fail:function(){

       wx.showToast({

        title: '服务器网络错误!',

        icon: 'loading',

        duration: 1500

       })

      }  

     })

 wx.request({})是小程序发起https请求,注意http是不行的。

 这里

a.url是你请求的网址,比如以前在前端,POST表单中action=‘index.php',这里的index.php是相对路径,而小程序请求的网址必须是网络绝对路径。

比如:https://shop.com/home/Login/register

b.

header: { 

    "Content-Type": "application/x-www-form-urlencoded" 

   },

由于POST和GET传送数据的方式不一样,POST的header必须是

"Content-Type": "application/x-www-form-urlencoded" 

GET的header可以是 'Accept': 'application/json'

c.一定要写明method:“POST”  默认是“GET”,保持大写

data:{mobile:e.detail.value.mobile,password:e.detail.value.password},

这里的data就是POST给服务器端的数据 以{name:value}的形式传送

d.成功回调函数

success: function(res) {

  if(res.data.status == 0){

    wx.showToast({

    title: res.data.info,

    icon: 'loading',

    duration: 1500

    })

}else{

    wx.showToast({

    title: res.data.info,

    icon: 'success',

    duration: 1000

    })

   }

  }

e.success:function()是请求状态成功触发是事件,也就是200的时候,注意,请求成功不是操作成功,请求只是这个程序到服务器端这条线的通的。

fail:function()就是网络请求不成功,触发的事件。

f.

if(res.data.status == 0){

         wx.showToast({

          title: res.data.info,

          icon: 'loading',

          duration: 1500

         })

       }else{

         wx.showToast({

          title: res.data.info,//这里打印出登录成功

          icon: 'success',

          duration: 1000

         })

       }

这里的一段代码是和PHP后端程序有关系的,具体流程是这样的,

1.POST通过数据到https://shop.com/home/Login/register这个接口,用过THINKPHP的就会知道是HOME模块下的Login控制下的register方法

2.register方法根据POST过来的数据,结合数据库进行二次验证,如果操作成功,返回什么,如果操作失败,返回什么

3.后端PHP代码如下:

控制器 LoginController.class.php

/**
 * 用户注册
 */
public function register()
{
  if (IS_POST) {
    $User = D("User");
    if (!$User->create($_POST, 4)) {
      $this->error($User->getError(),'',true);
    } else {
      if ($User->register()){
        $this->success('注册成功!','',true);
      }else{
        $this->error('注册失败!','',true);
      }
    }
  }
}

 模型

UserModel.class.php  的register方法

public function register()
{
  $mobile = I('post.mobile');
  $password = I('post.password');

  $res = D('User')->add(array(
    'mobile'=> $mobile,
    'password'=>md5($password),
    'modifytime'=>date("Y-m-d H:i:s")
  ));

  return $res;
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
js实现继承的5种方式
Dec 01 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
小程序转发探索示例
Feb 19 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
jQuery实现日历效果
Sep 11 jQuery
简单的渐变轮播插件
Jan 12 #Javascript
那些精彩的JavaScript代码片段
Jan 12 #Javascript
JavaScript实现星级评分
Jan 12 #Javascript
angular2倒计时组件使用详解
Jan 12 #Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 #Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 #Javascript
js中常用的Math方法总结
Jan 12 #Javascript
You might like
解析isset与is_null的区别
2013/08/09 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
PHP Include文件实例讲解
2019/02/15 PHP
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
Python多线程实例教程
2014/09/06 Python
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python随机读取文件实现实例
2017/05/25 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
如何在python中写hive脚本
2019/11/08 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
社区学雷锋活动策划方案
2014/01/30 职场文书
安全大检查实施方案
2014/02/22 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
语文教育专业求职信
2014/06/28 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
HAM-2000摩机图
2021/04/22 无线电
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android