微信小程序提交form表单 php后端附代码

微信小程序form表单提交流程及前后端代码

form表单提交界面示意图

年龄这边是做了一个下拉框选择，男女是单选框。

前端wxml代码

样式代码就不发了

// 

	<view class="my_2">
		<text class="myx1">姓名：</text>
		<text class="myx2">年龄：</text>
		<view class="myx3">
			<input type="text" name='Uname' placeholder="请输入姓名" placeholder-style="color: #BFBFBF;"></input>
		</view>
		<view class="myx4">
			<picker name='Uage' bindchange="bindPickerChangeage" value="{{indexage}}" range="{{arrayage}}">
				<view class="addorder_88">
					<view class="{{indexage!=-1?'on':''}}" style="{{(indexage!=-1)?'color:black':'color:#C0C0C0'}}">
						{{indexage!=-1?indexage:"请选择年龄"}}
					</view>
				</view>
			</picker>
		</view>

		<text class="myx5">性别：</text>
		<view class="myx6"></view>
		<radio-group name="Usex">
			<label class="radio1">
				<radio value="男" checked="true" color="#ffaf25" />男
			</label>
			<label class="radio2">
				<radio value="女" color="#ffaf25" />女
			</label>
		</radio-group>
		<text class="myx7">手机号：</text>
		<view class="myx8">
			<input type="text" name='Utel' placeholder="请输入手机号" placeholder-style="color: #BFBFBF;"></input>
		</view>
	</view>
	<view class="myx9">
		<button form-type="submit" class="buttonstyle"   style="width:500rpx">获取检测码</button>
	</view>
</form>

js代码（只给出formSubmit部分）

  formSubmit: function (e) {
    var that=this
    that.onShow();
    that.onLoad();
    var id = wx.getStorageSync('openid');
    console.log(e.detail.value);
    var TIME = util.formatTime(new Date());
    console.log('时间发送携带值为', TIME)
    var reg = /^1[3-9][0-9]{9}$/;
    var checkPhone = reg.test(e.detail.value.Utel)
    if (e.detail.value.Uname == -1) {
      wx.showToast({
        title: '姓名不能为空哦!',
        icon: 'none',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    } else if (e.detail.value.Uage == -2) {
      wx.showToast({
        title: '年龄不能为空哦!',
        icon: 'none',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }  else if (!checkPhone) {
      wx.showToast({
        title: '手机号格式不正确!',
        icon: 'none',
        duration: 2000
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    } else if (e.detail.value.Utel == 0) {
      wx.showToast({
        title: '手机号不能为空哦!',
        icon: 'none',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }else if (e.detail.value.Usex == 0) {
      wx.showToast({
        title: '性别不能为空哦!',
        icon: 'none',
        duration: 1500
      })
      setTimeout(function () {
        wx.hideToast()
      }, 2000)
    }else {
                wx.request({
                  url: 'https://你的服务器地址',
                  data: {
                    Uname: e.detail.value.Uname,//都是提交的信息参数
                    Uage: e.detail.value.Uage,
                    Utel: e.detail.value.Utel,
                    Usex:e.detail.value.Usex,
                    Uid: id,
                    Utime:TIME, //时间

                  },
                  method: 'POST',
                  header: {
                    'content-type': "application/x-www-form-urlencoded"
                  },
                  success: function (res) {
                    console.log('返回信息为',res.data);
                      wx.navigateTo({
                        url: '/pages/界面/界面', //提交成功以后跳转到其他界面
                      })
                   }
                })
        }
    },

php代码（接受微信提交的信息，写入数据）

error_reporting(E_ALL ^ E_NOTICE);
$con=mysqli_connect("localhost","root","xxxxxx","xxxxxx"); //链接数据库，分别是服务器，数据库用户，密码和数据库名
if (!$con)
{
    die('Could not connect: ' . mysqli_connect_error());
}
mysqli_query($con,"set names utf8");

$t=substr(md5(microtime(true)), 0, 6);//生成六位编码

    $sql = "UPDATE  user  SET Uname='$_POST[Uname]',Uage='$_POST[Uage]',Utel='$_POST[Utel]',Usex='$_POST[Usex]',Utime='$_POST[Utime]',code='$t'   where openid='$_POST[Uid]'";//user 数据库表名
    $result = mysqli_query($con, $sql);
    if (!$result) {
        printf("Error: %s\n", mysqli_error($con));
        exit();
    }
    $sql2="SELECT * FROM user  WHERE openid='$_POST[Uid]'";
    $res=$con->query($sql);
    $res=$con->query($sql2);
    $data=$res->fetch_all(PDO::FETCH_LAZY);
    echo json_encode($data);//返回给微信的json格式信息

?>

以上就是微信小程序提交form表单，后端php对数据库进行处理，这只是简单的demo，有想法欢迎留言讨论~~