在微信小程式中PHP後端form表單的提交

這篇文章主要介紹了小程式 PHP後端form表單提交執行個體詳解的相關資料,需要的朋友可以參考下

小程式 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;}

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！