小程序表单提交到数据库

2021年2月5日14:11:52 发表评论
广告也精彩

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

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

3.目录图

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

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

5.Wxml文件代码

  1. <!--**************************首页表单******************* -->
  2. <view class="info-box">
  3. <view class="sdd">
  4. 申请试用账号或咨询
  5. </view>
  6. <form bindsubmit="formSubmit" bindreset="formReset">
  7. <view class="section1">
  8. <input name="xingming" placeholder="请输入姓名" class="section11"/>
  9. </view>
  10. <view class="section2">
  11. <input name="xingbie" placeholder="您的电话" class="section11" />
  12. </view>
  13. <view class="section3">
  14. <input name="aihao" placeholder="请输入您的需求" class="section11" />
  15. </view>
  16. <view class="btn-area4">
  17. <button formType="submit">提交申请</button>
  18. <!--* <button formType="reset">重置</button>-->
  19. </view>
  20. </form>
  21. </view>
  22. <!--**************************首页表单******************* -->

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.

  1. formSubmit:function (e) {
  2.     //console.log(e.detail.value);
  3.     if (e.detail.value.xingming.length == 0 || e.detail.value.xingming.length >= 8) {
  4.     swan.showToast( {
  5.     title:'姓名不能为空或过长!',icon:'loading',duration:1500
  6. }
  7. )
  8. setTimeout(function () {
  9.     swan.hideToast()
  10. }
  11. ,2000)}else if (e.detail.value.xingbie.length == 0) {
  12.     swan.showToast( {
  13.     title:'电话不能为空!',icon:'loading',duration:1500
  14. }
  15. )
  16. setTimeout(function () {
  17.     swan.hideToast()
  18. }
  19. ,2000)}else if (e.detail.value.aihao.length == 0) {
  20.     swan.showToast( {
  21.     title:'需求不能为空!',icon:'loading',duration:1500
  22. }
  23. )
  24. setTimeout(function () {
  25.     swan.hideToast()
  26. }
  27. ,2000)}else {
  28.     swan.request( {
  29.     url:'https://www.zeiot.cn/ceshi/form.php',header: {
  30.     "Content-Type":"application/x-www-form-urlencoded"
  31. }
  32. ,method:"POST",data: {
  33.     xingming:e.detail.value.xingming,xingbie:e.detail.value.xingbie,aihao:e.detail.value.aihao
  34. }
  35. ,success:function (res) {
  36.     console.log(res.data);
  37.     if (res.data.status == 0) {
  38.     swan.showToast( {
  39.     title:'提交失败!!!',icon:'loading',duration:1500
  40. }
  41. )}else {
  42.     swan.showToast( {
  43.     title:'提交成功!',//这里打印出登录成功
  44. icon:'success',duration:1000
  45. }
  46. )}}})}}

8.需要注意的是

Page()这个方法是必须有的,里面放置js对象,用于页面加载的时候,呈现效果

data: {},数据对象,设置页面中的数据,前端可以通过读取这个对象里面的数据来显示出来。

formSubmit: function 小程序中方法都是 方法名:function(),其中function可以传入一个参数,作为触发当前时间的对象下面是函数的执行,由于验证太多,我只拿一部分出来理解。

  1. if (e.detail.value.xingming.length == 0 || e.detail.value.xingming.length >= 8) {
  2.     wx.showToast({
  3.         title: '姓名不能为空或过长!',
  4.         icon: 'loading',
  5.         duration: 1500
  6.     }) setTimeout(function() {
  7.         wx.hideToast()
  8.     },
  9.     2000)
  10. }

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.重点来了

  1. wx.request({
  2.     url: 'https://www.xxxxx.com/wx/form.php',
  3.     header: {
  4.         "Content-Type""application/x-www-form-urlencoded"
  5.     },
  6.     method: "POST",
  7.     data: {
  8.         xingming: e.detail.value.xingming,
  9.         xingbie: e.detail.value.xingbie,
  10.         aihao: e.detail.value.aihao
  11.     },
  12.     success: function(res) {
  13.         console.log(res.data);
  14.         if (res.data.status == 0) {
  15.             wx.showToast({
  16.                 title: '提交失败!!!',
  17.                 icon: 'loading',
  18.                 duration: 1500
  19.             })
  20.         } else {
  21.             wx.showToast({
  22.                 title: '提交成功!!!',
  23.                 //这里打印出登录成功
  24.                 icon: 'success',
  25.                 duration: 1000
  26.             })
  27.         }
  28.     }
  29. })

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”,保持大写

  1. data:xingming:e.detail.value.xingming,xingbie:e.detail.value.xingbie,aihao:e.detail.value.aihao},这里的data就是POST给服务器端的数据 以{name:value}的形式传送

D.成功回调函数

  1. success: function(res) {
  2.     // console.log(res.data);
  3.     if (res.data.status == 0) {
  4.         wx.showToast({
  5.             title: '提交失败!!!',
  6.             icon: 'loading',
  7.             duration: 1500
  8.         })
  9.     } else {
  10.         wx.showToast({
  11.             title: '提交成功!!!',
  12.             icon: 'success',
  13.             duration: 1000
  14.         })
  15.     }
  16. }

E.success:function()是请求状态成功触发是事件,也就是200的时候,注意,请求成功不是操作成功,请求只是这个程序到服务器端这条线的通的。

F.

  1. if (res.data.status == 0) {
  2.     wx.showToast({
  3.         title: '提交失败!!!',
  4.         icon: 'loading',
  5.         duration: 1500
  6.     })
  7. }

数据库表如下:

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

还是晒晒吧。。。

  1. <?php
  2. $con=mysqli_connect("localhost","root","root","DBname");
  3. if (!$con)
  4. {
  5. die('Could not connect: ' . mysqli_connect_error());
  6. }
  7. mysqli_query($con,"set names utf8");
  8. if (!emptyempty($_POST['xingming'])&&!emptyempty($_POST['xingbie'])&&!emptyempty($_POST['aihao'])){
  9. $sql="INSERT INTO person (xingming, xingbie, aihao) VALUES ('$_POST[xingming]','$_POST[xingbie]','$_POST[aihao]')";
  10. $result = mysqli_query($con,$sql);
  11. if (!$result)
  12. {
  13. die('Error: ' . mysqli_connect_error());
  14. }
  15. }
  16. $sql1 = "SELECT * FROM person";
  17. $result1 = mysqli_query($con,$sql1);
  18. ?>
  19. <!doctype html>
  20. <html lang="zh-cn">
  21. <head>
  22. <meta charset="utf-8">
  23. <title>表单</title>
  24. </head>
  25. <body style="margin:50px;">
  26. <script language="JavaScript">
  27. function myrefresh()
  28. {
  29. window.location.reload();
  30. }
  31. setTimeout('myrefresh()',10000); //指定1秒刷新一次
  32. </script>
  33. <table style='text-align:left;' border='1'>
  34. <tr><th>id</th><th>名字</th><th>性别</th><th>爱好</th></tr>
  35. <?php
  36. while ($bookInfo = mysqli_fetch_array($result1,MYSQLI_ASSOC)){ //返回查询结果到数组
  37. $xingming = $bookInfo["xingming"]; //将数据从数组取出
  38. $xingbie = $bookInfo["xingbie"];
  39. $aihao = $bookInfo["aihao"];
  40. $id = $bookInfo["id"];
  41. echo "<tr><td>{$id}</td><td>{$xingming}</td><td>{$xingbie}</td><td>{$aihao}</td></tr>";
  42. }
  43. //释放结果集
  44. mysqli_free_result($result1);
  45. mysqli_close($con);
  46. ?>
  47. </table>
  48. </body>
  49. </html>

样式

  1. /* 表单样式*/
  2. .info-box .section11{
  3. displayblock;
  4. width: 100%;
  5. height32px;
  6. box-sizing: border-box;
  7. padding6px;
  8. background-color#ffffff;
  9. background-imagenone;
  10. border: 0.5px #ccc solid;
  11. border-radius: 0;
  12. font-size13px;
  13. color#888;
  14. margin-bottom:15px;
  15. }
  16. .info-box{
  17. padding: 0 15px;
  18. padding-top15px;
  19. background:#0595c7;
  20. }
  21. .info-box .btn-area4{
  22. padding-bottom:6px;
  23. }
  24. .info-box .sdd{
  25. font-size:18px;
  26. color:#fff;
  27. text-align:center;
  28. margin-bottom:8px;
  29. }

直接访问php文件查看提交数据:

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
ts小陈

发表评论(请规范评论)--评论需审核

:?: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :cry: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :neutral: :razz:

已登录用户不需要填写以下内容