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

下面举例将个人信息提交表单到数据库实例

先来看看目录结构图

·js文件是逻辑控制，主要是它发送请求和接收数据，

·json 用于此页面局部 配置并且覆盖全局app.json配置，

·wxss用于页面的样式设置，

·wxml就是页面，相当于html

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

wxml文件代码：

姓名

性别

男

女

爱好

旅游

看书

电动

篮球

提交

重置

其中几个关键点需要理解：

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表单中都要有一个提交按钮，

提交，这个按钮就是用来开启提交事件的。

index.js代码：//index.js

//获取应用实例

const app = getApp()

Page({

data: {

},

formSubmit: function (e) {

//console.log(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 if (e.detail.value.xingbie.length == 0) {

wx.showToast({

title: '性别不能为空!',

icon: 'loading',

duration: 1500

})

setTimeout(function () {

wx.hideToast()

}, 2000)

} else if (e.detail.value.aihao.length == 0) {

wx.showToast({

title: '爱好不能为空!',

icon: 'loading',

duration: 1500

})

setTimeout(function () {

wx.hideToast()

}, 2000)

} else {

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

})

}

}

})

}

},

})

需要注意的是

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)

}

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

重点来了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的时候，注意，请求成功不是操作成功，请求只是这个程序到服务器端这条线的通的。

F.if (res.data.status == 0) {

wx.showToast({

title: '提交失败！！！',

icon: 'loading',

duration: 1500

})

}

加一条，单独写的事件也是也可的。具体问题具体对待saveEvaluate:function (e){

let that = this;

let answerPaths = this.data.listData.studentQuestionList[this.data.m].answerPaths;

let studentId = this.data.listData.studentQuestionList[this.data.m].studentId;

request.post({

url: 接口名称,

data: {

photoId: this.data.detail.homeworkId,

userId: studentId,

photoRemark: e.detail.value.photoRemark,

photoScore: e.detail.value.photoScore,

answerPaths: answerPaths,

access_token: app.getToken()

}

}).then(res => {

if (res.data.code == 200) {

that.setData({

studentList: that.data.studentList,

completeStudentList: that.data.completeStudentList

})

//刷新弹框页面数据

wx.navigateTo({

url: '/pages/xxx/xxx/xxx',

})

}

})

}

数据库表如下：

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 (!empty($_POST['xingming'])&&!empty($_POST['xingbie'])&&!empty($_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);

?>html>

表单

function myrefresh()

{

window.location.reload();

}

setTimeout('myrefresh()',10000); //指定1秒刷新一次

id	名字	性别	爱好

while ($bookInfo = mysqli_fetch_array($result1,MYSQLI_ASSOC)){ //返回查询结果到数组

$xingming = $bookInfo["xingming"]; //将数据从数组取出

$xingbie = $bookInfo["xingbie"];

$aihao = $bookInfo["aihao"];

$id = $bookInfo["id"];

echo "

{$id}{$xingming}{$xingbie}{$aihao}";

}

//释放结果集

mysqli_free_result($result1);

mysqli_close($con);

?>

最后更新：2019-02-13 16:56:20

赞 (4)

or

分享 (0)