微信小程序之from表单提交数据到PHP后台

主要内容：实现微信小程序与PHP后台之间的数据传递

本文通过from表单提交到后台存入数据库来展现

需要注意的有：
勾选

代码如下：
demo1.wxml

<!--pages/demo1/demo1.wxml-->
<form bindsubmit='formSubmit'  bindreset='formReset'><view class="container"><view class="login-from"><!--姓名--><view class="inputView"><label class="loginLab">姓名</label><input class="inputText" name="name" placeholder="请输入姓名" /></view><view class="line"></view><!--手机号--><view class="inputView"><label class="loginLab">手机号</label><input class="inputText" name="mobile"  placeholder="请输入手机号" /></view><!--登录按钮--><view class="loginBtnView"><button class="loginBtn" catchtap="submit" type="primary" form-type='submit'>提交</button><button class="loginBtn" type="primary" form-type='reset'>重置</button></view></view></view>
</form>

demo1.wxss

/* pages/demo1/demo1.wxss */
page{height: 100%;
}.container {height: 70%;display: flex;flex-direction: column;padding: 0;box-sizing: border-box;background-color: #f2f2f2
} /*表单内容*/
.login-from {margin-top: 20px;flex: auto;height:100%;
}.inputView {background-color: #fff;line-height: 44px;
}
/*输入框*/
.nameImage, .keyImage {margin-left: 22px;width: 14px;height: 14px
}.loginLab {margin: 15px 15px 15px 10px;color: #545454;font-size: 14px
}
.inputText {flex: block;float: right;text-align: right;margin-right: 22px;margin-top: 11px;color: #cccccc;font-size: 14px
}/*按钮*/
.loginBtnView {width: 750rpx;height: 750rpx;background-color: #f2f2f2;margin-top: 0px;margin-bottom: 0px;padding-bottom: 0px;
}.loginBtn {width: 350rpx;margin-top: 15rpx;margin-left: 17rpx;float: left;
}

demo1.js

//var url = 'http://wxtest.com/index.php/index'//tp5
var url = 'http://localhost/wxphp/form.php'//源生
Page({data: {},formSubmit: function (e) {var that = thiswx.request({url: url,data: {'name': e.detail.value.name,'mobile': e.detail.value.mobile,},method: 'GET',header: {'content-type': 'application/json'},success: function (res){console.log(1111);console.log(res.data.status);if (res.data.status == 1) {wx.showToast({title: res.data.info,duration: 2000});}else{wx.showToast({title: '提交失败',duration: 2000});}},})}
})

PHP后台代码分两种方式接收：源生和TP5.1框架

源生：
from.php

<?php
//设置编码utf—8
header('Content-type:text/html;charset=utf-8');
//接收数据
$name = $_GET['name'];
$mobile = $_GET['mobile'];
//连接数据库
$con = new mysqli("localhost","root","root","wxphp");
//定义sql语句
$sql = "INSERT INTO user(name,mobile) values('$name','$mobile ');";
//发送sql语句
$res = mysqli_query($con,$sql);
if($res){$arr['status'] = 1;$arr['info'] = '提交成功';
}else{$arr['status'] = 0;$arr['info'] = '提交失败';
}
echo json_encode($arr);
die;

TP5.1：

<?php
namespace app\index\controller;
use think\Db;class Index
{public function index(){//接收数据$data = input('post.');//将数据存入数据库$res = Db::name('user')->insert($data);//将结果反馈给前台if($res){$arr['status'] = 1;$arr['info'] = '提交成功';}else{$arr['status'] = 0;$arr['info'] = '提交失败';}echo json_encode($arr);die;
}

本案例只是简单地将数据从微信小程序前台提交给PHP后台，然后后台将数据存入数据库，没有过多地验证规则

效果图如下：

微信小程序之from表单提交数据到PHP后台相关推荐

微信小程序+SpringMVC图文表单提交（包括前后端代码）
文章目录前言一.基本功能说明二.小程序前端三.SpringMVC后端总结前言本项目使用微信小程序+SpringMVC搭建.这里展示的是其中表单提交的部分(图片和文字).本文包括前后端关键 ...
微信小程序中form 表单提交和取值实例详解
2019独角兽企业重金招聘Python工程师标准>>> 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="on ...
小程序 | 微信小程序from报名表单提交至数据库（含js提交函数）
效果图 index.wxml <form bindsubmit="formSubmit" bindreset="formReset"><!-- ...
微信小程序表单提交php存储,微信小程序实现form表单本地储存数据
本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下效果图: 主要利用小程序的getStorage来实现异步本地储存. 小程序目录结构如下: 新建项目前,为 ...
微信小程序的动态表单，实现房屋租赁的多租客录入
0 前言本文将介绍如何使用微信小程序编写动态表单,最终实现房屋租赁系统中多租客录入的业务. 在阅读本文前,您需要对微信小程序的开发有一个初步的了解,以便更容易的学会开发动态表单. 作者主页:Desi ...
微信小程序开发之表单验证（WxValidate使用）
微信小程序的开发框架个人感觉大体上跟VUE是差不多的,但是他的表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般有两种方法,一是自己裸写验证规则,但是需要比较扎实的正则表达式基础,一种是利用 ...
微信小程序之获取表单数据
前言:微信小程序中很多地方运用到了表单,很多时候我们需要把表单中的内容提取出来返回给后台,这里我随便写了一点注意点: 1.所有的input textarea button全部包含在form表单元素 ...
微信小程序开发——form表单
WeChat小程序交流(QQ群:769977169) 效果图代码示例 1.xxx.wxml <form bindsubmit='submitClick' bindreset='resetCli ...
微信小程序之自定义表单组件(radio)
背景: 最近在做项目的时候遇到一个问题,那就是微信的官方表单组件的可扩展性不强,无法达到设计稿所要求的效果,所以想到了用自定义组件的方法自定义一个表单组件. (自定义组件其实往往用在需要复用的地方,比 ...

微信小程序之from表单提交数据到PHP后台

微信小程序之from表单提交数据到PHP后台相关推荐

最新文章

热门文章