小程序表单demo提交+php连接后台数据库

//index.wxml
<form bindsubmit="formSubmit" bindreset="formReset">

  <view class="section">
    <view class="section__title">姓名</view>
    <input name="xingming" placeholder="请输入姓名" value='{{xingming}}'/>
  </view>
  <view class="btn-area">
    <button formType="submit">提交</button>
    <button formType="reset" >重置</button>
  </view>
</form>
 <view wx:for="{{list}}" wx:key="list">
<view>{{item.xingming}}</view>
</view>

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    //xingming:''
  },
  onLoad:function(res){
   var th=this;    //成功后数据改变,复制对象
   wx:wx.request({
     url: 'http://1.weiming.applinzi.com/wx/wx.php',
     header: {
       'content-type':'application/json'
     },
     method: 'GET',
     success: function(res) {
       console.log(res);
       th.setData({
        list:res.data
       })
     },
     fail: function(res) {
       console.log("-----fail-----");
     },
     complete: function(res) {},
   })
  },
  formSubmit: function (e) {
    //console.log(e.detail.value);
    var that = this;
    var formData = 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)
    }
    else{
      wx.request({
        url: 'http://1.weiming.applinzi.com/wx/wx.php',
        data:formData,
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        method: "POST",
        data: { 
        xingming: e.detail.value.xingming
        },
        success: function (res) {
          console.log(res.data);
          if (res.data.status == 0) {
            wx.showToast({
              title: '提交失败!!!',
              icon: 'loading',
              duration: 1000
            })
          } else {
            wx.showToast({
              title: '提交成功!!!',//这里打印出登录成功
              icon: 'success',
              duration: 1000
            })
            that.setData({
              xingming:''  //input框清空
            }
            )
          }
        }
      })
    }
  }
})
后台php:
<?php
    $host=SAE_MYSQL_HOST_M;
    $port=SAE_MYSQL_PORT;
    $user =SAE_MYSQL_USER;
    $pass =SAE_MYSQL_PASS;
    $bdname =SAE_MYSQL_DB;
	$con = mysqli_connect($host, $user, $pass, $bdname , $port); //建立连接																										
if(!$con)
{
	die('建立连接失败:' . mysqli_connect_error());
}
else
{  
	mysqli_query($con,'set names "utf8"'); 
    mysqli_select_db($con,$bdname);  //选择需使用的数据库
 
   if (!empty($_POST['xingming']))
   {
	   $sql="INSERT INTO person (xingming) VALUES ('$_POST[xingming]')";	
	   $result = mysqli_query($con,$sql);
	   if (!$result)
	     {  
	   	die('Error: ' . mysqli_connect_error());
	     }
  } 
  $sql1 = "SELECT * FROM person";
  $result1 = mysqli_query($con,$sql1);
  $data= $result1->fetch_all(PDO::FETCH_LAZY);  
  echo json_encode($data);//以json形式返回
}  
?>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值