Soumission du formulaire backend PHP dans le mini-programme WeChat

Cet article présente principalement les informations pertinentes sur l'explication détaillée de l'exemple de soumission de formulaire backend PHP du programme WeChat Mini. Les amis dans le besoin peuvent se référer au

Formulaire de formulaire backend PHP du programme WeChat Mini

1. Par rapport à la précédente création de site Web WEB+PHP, le mini programme , ma compréhension personnelle est qu'il met simplement le Web du côté WeChat et utilise le format fixe. fin du mini programme pour la mise en page et les événements Pour le déclenchement, la transmission et la lecture des données, le côté serveur peut être écrit dans n'importe quel langage back-end, mais toutes les données doivent être renvoyées à l'applet sous forme de JSON.

2. Hier, j'ai écrit les fonctions d'enregistrement de connexion et de mot de passe oublié. Il s'agit essentiellement d'une opération de soumission de formulaire. Utilisons donc la fonction d'enregistrement pour écrire cet exemple.

3. Carte du répertoire

1. Le fichier js est un contrôle logique, principalement il envoie des requêtes et reçoit des données,

2. json est utilisé pour la configuration locale de cette page et remplace la configuration globale app.json,

3. wxss est utilisé pour le paramètre de style de page,

4. wxml est une page équivalente à html

4 Ignorez le style et le fichier json pour l'instant, je veux juste revoir la soumission du formulaire<.>

Code de fichier 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. Plusieurs points clés doivent être compris

un formulaire.Form doit lier un événement de soumission Dans le mini-programme, l'attribut est bindsubmit,

bindsubmit="formSubmit

" La valeur de l'attribut ici. est formSubmit, nommé Il peut s'agir de n'importe quelle valeur conforme à la spécification, ce qui est équivalent à onsubmit="formSubmit()" dans le HTML précédent est un nom de fonction Lorsqu'il est soumis, l'événement de fonction formSubmit est déclenché. . Cette fonction est écrite en js. b. Les autres attributs sont similaires au HTML précédent. Notez que le formulaire doit avoir name="value" et que le traitement back-end est le même qu'avant. Par exemple, name="username" PHP peut le faire. utilisez $_POST[ 'username'] pour recevoir.

C. Étant donné que le mini-programme n'a pas de bouton de soumission d'entrée, il doit y avoir un bouton de soumission dans chaque formulaire,

3993c6f6226c20b67508b2f5faca1f97 ;/button>,

Ce bouton est utilisé pour ouvrir l'événement de soumission. Code 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: &#39;请输入6-20密码!&#39;,

    icon: &#39;loading&#39;,

    duration: 1500

   })

   setTimeout(function(){

     wx.hideToast()

    },2000)

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

    wx.showToast({

    title: &#39;两次密码输入不一致!&#39;,

    icon: &#39;loading&#39;,

    duration: 1500

   })

   setTimeout(function(){

     wx.hideToast()

    },2000)

  }else{


   wx.request({ 

      url: &#39;https://shop.yunapply.com/home/Login/register&#39;, 

      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: &#39;loading&#39;,

          duration: 1500

         })

       }else{

         wx.showToast({

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

          icon: &#39;success&#39;,

          duration: 1000

         })

       }

      } 

     })

  }

 }, 

})

Il est à noter que

Page() est une méthode incontournable. Un objet js y est placé pour afficher l'effet lorsque la page est chargée

data : {}, objet data, définit les données dans la page. Le frontal peut le lire. Les données de cet objet sont affichées.

formSubmit : function Les méthodes du mini-programme sont toutes des noms de méthodes : function(), où la fonction peut passer un paramètre en tant qu'objet qui déclenche l'heure actuelle

Ce qui suit est l'exécution de la fonction, pour cause de vérification Il y en a trop, je n'en retire que quelques-uns pour comprendre.

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

   wx.showToast({

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

    icon: 'loading',

    duration: 1500

   })

Le e ici est l'objet qui déclenche actuellement l'événement, similaire au html onclick="foo(this)" cet objet, qui est encapsulé par l'applet De nombreuses méthodes d'appel intégrées, e.detail.value.mobile est la valeur de l'objet actuel name="mobile" e.detail.value.mobile.length est la longueur de cette valeur

showToast est similaire à JS L'alerte, la boîte contextuelle, le titre sont les informations affichées dans la boîte contextuelle et l'icône est l'état de l'icône de la boîte contextuelle. Actuellement, il n'y a que deux états : chargement et réussite. . la durée est la durée pendant laquelle la boîte contextuelle est affichée à l'écran.

9. Voici le point

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({}) est un petit programme qui lance la requête https, veuillez noter que http n'est pas acceptable.

Ici

a.url est l'URL que vous avez demandée. Par exemple, dans le front-end, action='index.php' dans le formulaire POST, index.php ici est un relatif. chemin et l'applet. L'URL demandée doit être un chemin réseau absolu.

Par exemple : https://shop.com/home/Login/register

b.

 header: { 

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

   },

Puisque POST et GET transmettent les données de différentes manières, l'en-tête POST doit être

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

L'en-tête de GET peut être 'Accept' : 'application/json'

c Assurez-vous de préciser la méthode : "POST". La valeur par défaut est "GET", gardez les majuscules

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

Les données ici sont les données POST envoyées au serveur dans le forme de {name:value}

d. Fonction de rappel de réussite

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()

est le statut de la demande déclenché avec succès. Il s'agit d'un événement, c'est-à-dire 200. Notez qu'une demande réussie ne signifie pas une opération réussie. La demande est simplement la ligne de ce programme vers le serveur.

fail:function()

est l'événement déclenché lorsque la requête réseau échoue.

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

         })

       }

Le morceau de code ici est lié au programme backend PHP, en particulier The le processus est comme ça,

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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

PHP 中TP5 Request的请求对象

php中反射的应用

PHP后端方法实现网页的分页下标生成代码

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!