小程序表单提交到数据库

2021年2月5日14:11:52 发表评论

1.小程序相对于之前的WEB+PHP建站来说，个人理解为只是将web放到了微信端，用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取，服务器端可以用任何后端语言写，但是所有的数据都要以JSON的形式返回给小程序。

2.就拿个人信息提交表单来写这简单的例子。

3.目录图

js文件是逻辑控制，主要是它发送请求和接收数据，
json 用于此页面局部配置并且覆盖全局app.json配置，
wxss用于页面的样式设置，
wxml就是页面，相当于html

4.样式和json文件暂时不管了，回顾一下form表单的提交

5.Wxml文件代码

<view class="info-box">
<view class="sdd">
申请试用账号或咨询
</view>
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section1">
<input name="xingming" placeholder="请输入姓名" class="section11"/>
</view>
<view class="section2">
<input name="xingbie" placeholder="您的电话" class="section11" />
</view>
<view class="section3">
<input name="aihao" placeholder="请输入您的需求" class="section11" />
</view>
<view class="btn-area4">
<button formType="submit">提交申请</button>
</view>
</form>
</view>

6.其中几个关键点需要理解

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表单中都要有一个提交按钮，<button formType="submit">提交</button>，这个按钮就是用来开启提交事件的。

7.index.js代码（百度小程序为swan. 微信小程序为wx.）

formSubmit:function (e) {
//console.log(e.detail.value);
if (e.detail.value.xingming.length == 0 || e.detail.value.xingming.length >= 8) {
swan.showToast( {
title:'姓名不能为空或过长!',icon:'loading',duration:1500
}
)
setTimeout(function () {
swan.hideToast()
}
,2000)}else if (e.detail.value.xingbie.length == 0) {
swan.showToast( {
title:'电话不能为空!',icon:'loading',duration:1500
}
)
setTimeout(function () {
swan.hideToast()
}
,2000)}else if (e.detail.value.aihao.length == 0) {
swan.showToast( {
title:'需求不能为空!',icon:'loading',duration:1500
}
)
setTimeout(function () {
swan.hideToast()
}
,2000)}else {
swan.request( {
url:'https://www.zeiot.cn/ceshi/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) {
swan.showToast( {
title:'提交失败！！！',icon:'loading',duration:1500
}
)}else {
swan.showToast( {
title:'提交成功！',//这里打印出登录成功
icon:'success',duration:1000
}
)}}})}}

8.需要注意的是

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

wx为微信小程序，如果是百度小程序需要将wx改成swan

这里的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是弹出框在屏幕上显示的时间。

9.重点来了

wx.request({
url: 'https://www.xxxxx.com/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的时候，注意，请求成功不是操作成功，请求只是这个程序到服务器端这条线的通的。

if (res.data.status == 0) {
wx.showToast({
title: '提交失败！！！',
icon: 'loading',
duration: 1500
})
}

数据库表如下：

form.php文件很简单就不拿出来了~~

还是晒晒吧。。。

<?php
$con=mysqli_connect("localhost","root","root","DBname");
if (!$con)
{
die('Could not connect: ' . mysqli_connect_error());
}
mysqli_query($con,"set names utf8");
if (!emptyempty($_POST['xingming'])&&!emptyempty($_POST['xingbie'])&&!emptyempty($_POST['aihao'])){
$sql="INSERT INTO person (xingming, xingbie, aihao) VALUES ('$_POST[xingming]','$_POST[xingbie]','$_POST[aihao]')";
$result = mysqli_query($con,$sql);
if (!$result)
{
die('Error: ' . mysqli_connect_error());
}
}
$sql1 = "SELECT * FROM person";
$result1 = mysqli_query($con,$sql1);
?>
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body style="margin:50px;">
<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',10000); //指定1秒刷新一次
</script>
<table style='text-align:left;' border='1'>
<tr><th>id</th><th>名字</th><th>性别</th><th>爱好</th></tr>
<?php
while ($bookInfo = mysqli_fetch_array($result1,MYSQLI_ASSOC)){ //返回查询结果到数组
$xingming = $bookInfo["xingming"]; //将数据从数组取出
$xingbie = $bookInfo["xingbie"];
$aihao = $bookInfo["aihao"];
$id = $bookInfo["id"];
echo "<tr><td>{$id}</td><td>{$xingming}</td><td>{$xingbie}</td><td>{$aihao}</td></tr>";
}
//释放结果集
mysqli_free_result($result1);
mysqli_close($con);
?>
</table>
</body>
</html>