小程序相对于之前的WEB+PHP建站来说，个人理解为只是将web放到了微信端，用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取，服务器端可以用任何后端语言写，但是所有的数据都要以JSON的形式返回给小程序。
下面举例将个人信息提交表单到数据库实例
先来看看目录结构图
·js文件是逻辑控制，主要是它发送请求和接收数据，
·json 用于此页面局部 配置并且覆盖全局app.json配置，
·wxss用于页面的样式设置，
·wxml就是页面，相当于html
样式和json文件暂时不管了，回顾一下form表单的提交
wxml文件代码：
姓名
性别
男
女
爱好
旅游
看书
电动
篮球
提交
重置
其中几个关键点需要理解：
A.Form表单，需要绑定一个submit事件，在小程序中，属性为bindsubmit,
bindsubmit=”formSubmit”这里的属性值formSubmit，命名可以为符合规范的任意值，相当于以前html中的 οnsubmit=”formSubmit()”,是一个函数名，当提交的时候触发formSubmit这个函数事件，这个函数写在js中。
B.其他的属性和之前的HTML差不多，注意的是，表单一定要有name=“value”，后端处理和以前一样，比如name=”username” PHP可以用 $_POST[‘username']来接收。
C.由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，
提交，这个按钮就是用来开启提交事件的。
index.js代码：//index.js
//获取应用实例
constapp=getApp()
Page({
data:{
},
formSubmit:function(e){
//console.log(e.detail.value);
if(e.detail.value.xingming.length==0||e.detail.value.xingming.length>=8){
wx.showToast({
title:'姓名不能为空或过长!',
icon:'loading',
duration:1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}elseif(e.detail.value.xingbie.length==0){
wx.showToast({
title:'性别不能为空!',
icon:'loading',
duration:1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}elseif(e.detail.value.aihao.length==0){
wx.showToast({
title:'爱好不能为空!',
icon:'loading',
duration:1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}else{
wx.request({
url:'/wx/form.php',
header:{
"Content-Type":"application/x-www-form-urlencoded"
},
method:"POST",
data:{xingming:e.detail.value.xingming,xingbie:e.detail.value.xingbie,aihao:e.detail.value.aihao},
success:function(res){
console.log(res.data);
if(res.data.status==0){
wx.showToast({
title:'提交失败！！！',
icon:'loading',
duration:1500
})
}else{
wx.showToast({
title:'提交成功！！！',//这里打印出登录成功
icon:'success',
duration:1000
})
}
}
})
}
},
})
需要注意的是
Page()这个方法是必须有的，里面放置js对象，用于页面加载的时候，呈现效果
data: {}数据对象，设置页面中的数据，前端可以通过读取这个对象里面的数据来显示出来。
formSubmit: function小程序中方法都是 方法名:function()，其中function可以传入一个参数，作为触发当前时间
的对象下面是函数的执行，由于验证太多，我只拿一部分出来理解。if(e.detail.value.xingming.length==0||e.detail.value.xingming.length>=8){
wx.showToast({
title:'姓名不能为空或过长!',
icon:'loading',
duration:1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}
这里的e，就是当前触发事件的对象，类似于html οnclick=“foo(this)”this对象，小程序封装了许多内置的调用方法，
e.detail.value.xingming就是当前对象name=”xingming”的对象的值, e.detail.value.xingming.length就是这
个值的长度showToast类似于JS中的alert，弹出框，title 是弹出框的显示的信息，icon是弹出框的图标状态，目前
只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。
重点来了wx.request({
url:'/wx/form.php',
header:{
"Content-Type":"application/x-www-form-urlencoded"
},
method:"POST",
data:{xingming:e.detail.value.xingming,xingbie:e.detail.value.xingbie,aihao:e.detail.value.aihao},
success:function(res){
console.log(res.data);
if(res.data.status==0){
wx.showToast({
title:'提交失败！！！',
icon:'loading',
duration:1500
})
}else{
wx.showToast({
title:'提交成功！！！',//这里打印出登录成功
icon:'success',
duration:1000
})
}
}
})
wx.request({})是小程序发起https请求，注意http是不行的。
这里
A.url是你请求的网址，比如以前在前端，POST表单中action=‘index.php'，这里的index.php是相对路径，而小程序
请求的网址必须是网络绝对路径。比如：https://www.xxxxxcom/wx/form.php
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:{xingming:e.detail.value.xingming,xingbie:e.detail.value.xingbie,aihao:e.detail.value.aihao},
这里的data就是POST给服务器端的数据 以{name:value}的形式传送
D.成功回调函数success:function(res){
//console.log(res.data);
if(res.data.status==0){
wx.showToast({
title:'提交失败！！！',
icon:'loading',
duration:1500
})
}else{
wx.showToast({
title:'提交成功！！！',
icon:'success',
duration:1000
})
}
}
E.success:function()是请求状态成功触发是事件，也就是200的时候，注意，请求成功不是操作成功，请求只是这个程序到服务器端这条线的通的。
F.if(res.data.status==0){
wx.showToast({
title:'提交失败！！！',
icon:'loading',
duration:1500
})
}
加一条，单独写的事件也是也可的。具体问题具体对待saveEvaluate:function(e){
letthat=this;
letanswerPaths=this.data.listData.studentQuestionList[this.data.m].answerPaths;
letstudentId=this.data.listData.studentQuestionList[this.data.m].studentId;
request.post({
url:接口名称,
data:{
photoId:this.data.detail.homeworkId,
userId:studentId,
photoRemark:e.detail.value.photoRemark,
photoScore:e.detail.value.photoScore,
answerPaths:answerPaths,
access_token:app.getToken()
}
}).then(res=>{
if(res.data.code==200){
that.setData({
studentList:that.data.studentList,
completeStudentList:pleteStudentList
})
//刷新弹框页面数据
wx.navigateTo({
url:'/pages/xxx/xxx/xxx',
})
}
})
}
数据库表如下：
form.php文件<?php
$con=mysqli_connect("localhost","root","root","DBname");
if(!$con)
{
die('Couldnotconnect:'.mysqli_connect_error());
}
mysqli_query($con,"setnamesutf8");
if(!empty($_POST['xingming'])&&!empty($_POST['xingbie'])&&!empty($_POST['aihao'])){
$sql="INSERTINTOperson(xingming,xingbie,aihao)VALUES('$_POST[xingming]','$_POST[xingbie]','$_POST[aihao]')";
$result=mysqli_query($con,$sql);
if(!$result)
{
die('Error:'.mysqli_connect_error());
}
}
$sql1="SELECT*FROMperson";
$result1=mysqli_query($con,$sql1);
?>html>
表单
functionmyrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',10000);//指定1秒刷新一次
while($bookInfo=mysqli_fetch_array($result1,MYSQLI_ASSOC)){//返回查询结果到数组
$xingming=$bookInfo["xingming"];//将数据从数组取出
$xingbie=$bookInfo["xingbie"];
$aihao=$bookInfo["aihao"];
$id=$bookInfo["id"];
echo"
{$id}{$xingming}{$xingbie}{$aihao}";
}
//释放结果集
mysqli_free_result($result1);
mysqli_close($con);
?>
最后更新：-02-13 16:56:20
赞 (4)
or
分享 (0)
如果觉得《小程序提交表单mysql_微信小程序form表单提交到MYSQL实例（PHP）》对你有帮助，请点赞、收藏，并留下你的观点哦！
