Übermittlung des PHP-Backend-Formulars im WeChat-Miniprogramm

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Erläuterung des Beispiels für die Einreichung eines PHP-Backend-Formulars für das WeChat Mini-Programm vorgestellt. Freunde in Not können sich auf

PHP-Backend-Formularformular für das WeChat Mini-Programm

1. Im Vergleich zum vorherigen WEB+PHP-Website-Builder, dem Miniprogramm , ist mein persönliches Verständnis, dass es das Web nur auf die WeChat-Seite stellt und das feste Format verwendet Ende des Miniprogramms für Layout und Ereignisse Zum Auslösen sowie zum Übertragen und Lesen von Daten kann die Serverseite in einer beliebigen Back-End-Sprache geschrieben werden, alle Daten müssen jedoch in Form von JSON an das Applet zurückgegeben werden.

Gestern habe ich die Login-Registrierung und die Funktion „Passwort vergessen“ geschrieben. Es handelt sich im Wesentlichen um einen Formularübermittlungsvorgang. Lassen Sie uns also die Registrierungsfunktion verwenden, um dieses Beispiel zu schreiben.

3. Verzeichnisdiagramm

1. js-Datei ist eine logische Steuerung, hauptsächlich sendet sie Anfragen und empfängt Daten,

2. json wird für die lokale Konfiguration dieser Seite verwendet und überschreibt die globale app.json-Konfiguration,

3. wxss wird für die Seitenstileinstellung verwendet,

4. wxml ist eine Seite, äquivalent zu html

4. Ignorieren Sie vorerst den Stil und die JSON-Datei, ich möchte nur die Formularübermittlung überprüfen

5.Wxml-Dateicode

<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. Mehrere wichtige Punkte müssen verstanden werden

a.Form-Formular muss ein Submit-Ereignis binden. Im Miniprogramm ist das Attribut bindsubmit,

bindsubmit="formSubmit" Der Attributwert hier ist formSubmit , und der Name kann sein: Jeder Wert, der der Spezifikation entspricht, ist äquivalent zu onsubmit="formSubmit()" im vorherigen HTML. Bei der Übermittlung wird das formSubmit-Funktionsereignis ausgelöst ist in js geschrieben. b. Andere Attribute ähneln dem vorherigen HTML. Beachten Sie, dass das Formular name="value" sein muss und die Back-End-Verarbeitung die gleiche sein muss wie zuvor Verwenden Sie $_POST[ 'Benutzername'] zum Empfangen.

C. Da das Miniprogramm keine Schaltfläche zum Senden von Eingaben hat, muss in jedem Formular eine Schaltfläche zum Senden vorhanden sein.

;/button>,

Mit dieser Schaltfläche wird das Einreichungsereignis geöffnet. 7.index.js-Code

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

         })

       }

      } 

     })

  }

 }, 

})

8. Was zu beachten ist, ist das

Page () Diese Methode ist erforderlich. Sie platziert ein js-Objekt, das zum Rendern des Effekts beim Laden der Seite verwendet wird:

Daten: {}, Datenobjekt festlegen Seite. Das Frontend kann dieses Objekt lesen. Die darin enthaltenen Daten werden angezeigt.

formSubmit: function Die Methoden im Miniprogramm sind alle Methodennamen: function(), wobei die Funktion einen Parameter als Objekt übergeben kann, das die aktuelle Zeit auslöst

Das Folgende ist die Ausführung der Funktion, aufgrund der Überprüfung Es gibt zu viele, ich nehme nur einige davon heraus, um sie zu verstehen.

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

   wx.showToast({

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

    icon: 'loading',

    duration: 1500

   })

Das e hier ist das Objekt, das derzeit das Ereignis auslöst, ähnlich dem HTML-onclick="foo(this)" Dieses Applet kapselt viele Eingebaut Die aufrufende Methode, e.detail.value.mobile ist der Wert des aktuellen Objektnamens = „mobile“ e.detail.value.mobile.length ist die Länge dieses Werts

showToast ist ähnlich Um in JS zu warnen, Pop-up-Box, Titel sind die im Pop-up-Feld angezeigten Informationen, Symbol ist der Symbolstatus des Pop-up-Felds, derzeit gibt es nur zwei Zustände: Laden und Erfolg. Die Dauer ist die Zeit, die das Popup-Fenster auf dem Bildschirm angezeigt wird.

9. Hier ist der Punkt

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({}) ist ein kleines Programm, das eine initiiert https-Anfrage. Beachten Sie, dass http nicht verfügbar ist.

Hier

a.url ist die von Ihnen angeforderte URL. Im Frontend ist beispielsweise action='index.php' im POST-Formular, hier ist index.php ein relativer Pfad , und das Applet Die angeforderte URL muss ein absoluter Netzwerkpfad sein.

Zum Beispiel: https://shop.com/home/Login/register

b.

 header: { 

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

   },

Fällig an POST Anders als GET Daten überträgt, muss der Header von POST

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

<🎜 sein >GET Der Header kann „Accept“ sein: „application/json“

c. Stellen Sie sicher, dass Sie die Methode „POST“ angeben, behalten Sie sie in Großbuchstaben bei

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

Die Daten hier sind die Daten, die per POST an den Server gesendet werden Form von {name:value}

d. Success-Callback-Funktion

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

ist ein Ereignis, das durch den Anforderungsstatus erfolgreich ausgelöst wird. Wenn es 200 ist, beachten Sie bitte, dass eine erfolgreiche Anforderung nicht einen erfolgreichen Vorgang bedeutet. Die Anforderung ist nur eine Zeile von diesem Programm an den Server.

fail:function()

ist das Ereignis, das ausgelöst wird, wenn die Netzwerkanforderung nicht erfolgreich ist.

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

         })

       }

Der Code hier bezieht sich auf das PHP-Backend-Programm Der Prozess ist so,

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后端方法实现网页的分页下标生成代码

Das obige ist der detaillierte Inhalt vonÜbermittlung des PHP-Backend-Formulars im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!