Submission of the PHP backend form form in the micro-message applet

This article mainly introduces the small program PHP back-end Form Submission example details of the relevant information, the need for friends can refer to the following

Small program php Backend form forms

1. Small program compared to the previous web+php station , the personal understanding of the web is just put on the end, with a small program fixed before the front-end layout, event triggering and data transmission and reading, the server can be written in any back-end language, However, all data is returned to the applet in JSON form.

2. Yesterday wrote the login registration, forget password function, they are essentially a form submission operation. so take the registration function to write this example.

3. Catalogue Map

1. JS file is the logical control, mainly it sends the request and receives the data,

2. JSON is used for this page local configuration and overrides the global App.json configuration,

3. WXSS is used for page style settings,

4. Wxml is the page, the equivalent of HTML

4. Styles and JSON files for the time being, I just want to review the submission of form forms.

5.Wxml File Code

<view class= "Load-head" > <image src= ". /.. /images/return.png "/> Registration </view><view class=" Login "> <form bindsubmit=" formsubmit "> <view CLA ss= "Field Clearfix" > <label for= "name" ><image src= ". /.. /images/phone.png "/></label> <input id=" name "name=" mobile "class=" Login-input "type=" text "placeholder= "Please enter phone number"/> </view> <view class= "field clearfix" > <label for= "password" ><image src= ". /.. /images/code.png "/></label> <input id=" password "class=" login-input "type=" password "placeholder=" Please enter validation Code "/> <button class=" Get-code "hover-class=" Code-hover "> Get Verification Code </button> </view> <view CL ass= "Field Clearfix" > <label for= "password" ><image src= ". /.. /images/password.png "/></label> <input id=" password "name=" password "class=" login-input "type=" password "Placeholder=" Please set 6-20-bit login password "/> </view> <view Class= "Field Clearfix" > <label for= "Repassword" ><image src= ". /.. /images/password.png "/></label> <input id=" Repassword "name=" Repassword "class=" Login-input "type=" pass Word "placeholder=" Please enter confirmation password "/> </view> <button class=" Btn_login "formtype=" submit "> Register </button&  Gt </form> <view class= "Reg_forget clearfix" > <navigator url= ". /login/index "class=" Btn_reg "> Login </navigator> <navigator url=". /forget/index "class=" btn_forget "> Forgot password </navigator> </view > </view>

6. Several of these key points need to be understood

A.form form, need to bind a submit event, in the applet, the property is Bindsubmit,

bindsubmit= "Formsubmit" here the attribute value Formsubmit, the name can be any value conforming to the specification, equivalent to onsubmit= "Formsubmit ()" in the previous HTML, is a function name that, when committed, triggers the function event Formsubmit, which is written in JS.

B. Other properties are similar to previous HTML, note that the form must have Name= "value", back-end processing as before, such as name= "username" PHP can be used $_post[' username ') to receive.

C. Since the applet does not have the input submit button, there is a submit button in each form form.

<button formtype= "submit" > Register </button>, This button is used to open the commit event.

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: ' Mobile phone number or password must not be empty! '), Icon: ' Loading ', duration:1500})    SetTimeout (function () {wx.hidetoast ()},2000)}else if (e.detail.value.mobile.length! =) {Wx.showtoast ({  Title: ' Please enter 11-digit mobile number! ', Icon: ' Loading ', duration:1500}) setTimeout (function () {wx.hidetoast ()},2000) }else if (e.detail.value.password.length <6 | | E.DETAIL.VALUE.PASSWORD.LENGTH&GT;20) {wx.showtoast {title: ' Please enter 6-20 password! ', Icon: ' Loading ', duration:1500}    ) SetTimeout (function () {wx.hidetoast ()},2000)}else if (e.detail.value.password! = E.detail.value.repassword) { Wx.showtoast ({title: ' two times password input inconsistent! ', Icon: ' Loading ', duration:1500}) setTimeout (function () {Wx.hidet        Oast ()},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.D Etail.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,//here Print out login success icon: ' Success ', duration:1000}}}}}} , })

8. It is important to note that

Page () This method is necessary, the inside of the JS object, used for page loading, rendering effect

The data: {}, the data object, sets the page, the front end can be displayed by reading the data inside the object.

The methods in the Formsubmit:function applet are method names: function (), where function can pass in a parameter as an object that triggers the current time

The following is the execution of the function, because there is too much validation, I only take part of it to understand.

if (e.detail.value.mobile.length==0| | e.detail.value.password.length==0) {   wx.showtoast ({    title: ' Mobile phone number or password must not be empty! '),    icon: ' Loading ',    duration:1500   })

Here, E, is the object that is currently triggering the event, similar to the HTML onclick= "foo (this)" The This object, the applet encapsulates many of the built-in calling methods, E.detail.value.mobile is the current object Name= "mobile" The value of the object e.detail.value.mobile.length is the length of the value

Showtoast similar to the alert in JS, pop-up box, title is the pop-up box display information, icon is the state of the pop-up box icons, currently only loading and success these two states. Duration is the time that the popup box appears on the screen.

9. The point is coming.

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,//here Print out login success          icon: ' Success ',          duration:1000         }       }}      },fail:function () {       Wx.showtoast ({        title: ' Server network Error! ',        icon: ' Loading ',        duration:1500       })      }       )

Wx.request ({}) is a small program that initiates an HTTPS request, noting that HTTP is not possible.

Over here

A.url is the URL you requested, such as previously in the front-end, the post form action= ' index.php ', where the index.php is a relative path, and the small program request URL must be the absolute network path.

For example: Https://shop.com/home/Login/register

B.

Header: {     "Content-type": "Application/x-www-form-urlencoded"    },

Since post and get transmit data in different ways, the header of the post must be

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

Get header can be ' Accept ': ' Application/json '

C. Be sure to specify the method: "POST" is "GET" by default, keep uppercase

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

The data in this case is the post to the server, which is transmitted as {Name:value}.

D. Success callback function

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 () is the request status Success trigger is an event, that is, 200, note that the request is not successful operation, the request is only this program to the server side of this line of the pass.

fail:function () is the event that the network request was unsuccessful and triggered.

F.

if (Res.data.status = = 0) {         wx.showtoast ({          title:res.data.info,          icon: ' Loading ',          duration:1500         })       } else{         wx.showtoast ({          title:res.data.info,//here print out login success          icon: ' Success ',          duration:1000         })       }

This section of code is related to the PHP backend program, the specific process is this,

1.POST through the data to https://shop.com/home/Login/register this interface, used thinkphp will know is the home module under Login Control Register method

2.register method According to post data, combined with the database for two verification, if the operation is successful, return what, if the operation failed, return what

3. Back-end PHP code is as follows:

Controller LoginController.class.php

/** * User Registration */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 (' registered successfully! ', ' ', true);      } else{        $this->error (' Registration failed! ', ' ', true ');}}}  

Model

UserModel.class.php's Register method

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

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!