This article mainly introduces the relevant information on the detailed explanation of the WeChat Mini Program PHP back-end form form submission example. Friends in need can refer to
WeChat Mini Program PHP back-end form form
1. Compared with the previous WEB PHP website building, the mini program , my personal understanding is that it just puts the web on the WeChat side, and uses the fixed format front-end of the mini program for layout and event triggering For data transmission and reading, the server can be written in any back-end language, but all data must be returned to the applet in the form of JSON.
2. Yesterday I wrote the login registration and forgotten password functions. They are essentially a form submission operation. So let’s use the registration function to write this example.
3. Directory diagram
#js file is a logical control, mainly it sends requests and receives data,
json is used for local configuration of this page and overrides global app.json configuration,
wxss is used for page style settings,
wxml is the page, which is equivalent to html
##4. I don’t care about the style and json file for now, I just want to review the submission of the form
5.Wxml file code
<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>a.Form form needs to bind a submit event. In the applet, the attribute is bindsubmit,
bindsubmit=”formSubmit” The attribute value here is formSubmit, and the name can be Any value that conforms to the specification is equivalent to onsubmit="formSubmit()" in previous HTML. is a function name. When submitted, the formSubmit function event is triggered. This function is written in js. b. Other attributes are similar to the previous HTML. Note that the form must have name="value", and the back-end processing is the same as before. For example, name="username" PHP can use $_POST[ 'username'] to receive.
C. Since the mini program does not have an input submit button, there must be a submit button in each form,
,This button is used to open the submission 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: '手机号码或密码不得为空!',
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. What needs to be noted is
Page () This method is necessary. It places a js object in it to display the effect when the page is loaded.
data: {}, data object, sets the data in the page. The front end can read this object The data inside is displayed. formSubmit: function The methods in the mini program are all method names: function(), where function can pass in a parameter as the object that triggers the current time The following is the execution of the function, due to verification There are too many, I only take out some of them to understand.if(e.detail.value.mobile.length==0||e.detail.value.password.length==0){
wx.showToast({
title: '手机号码或密码不得为空!',
icon: 'loading',
duration: 1500
})9. Here comes the key 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
})
}
})
header: {
"Content-Type": "application/x-www-form-urlencoded"
},"Content-Type": "application/x-www-form-urlencoded"
GET The header can be 'Accept': 'application/json'
c. Be sure to specify the method: "POST". The default is "GET", keep it in capitalsdata:{ mobile:e.detail.value.mobile,password:e.detail.value.password},
The data here is the data POST sent to the server in the form of {name:value}
d. Success callback functionsuccess: 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
})
}
}success:function()
is an event that is triggered successfully by the request status, also When it is 200, please note that a successful request does not mean a successful operation. The request is just a line from this program to the server.fail:function()
is the event triggered when the network request is unsuccessful.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
})
}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中文网！
相关推荐：
The above is the detailed content of Submission of PHP backend form in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
