微信小程序清空表单怎么操作？

　　想要实现微信小程序清空表单，就需要用到小程序的删改功能，以下是操作实例，希望大家可以在微信小程序商店中获取有用的资料。

　　1.以收货地址的增删改查为例

　　2.文件目录

　　js文件是小程序逻辑判断和控制，主要是它发送请求和接收数据，

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

　　wxss用于页面的样式设置，

　　wxml就是页面，相当于html

　　?

　　收货人信息

　　姓名

　　电话

　　地址

　　送货时间

　　收货地址信息

　　收货地址{{item.address}}1km

　　收货人{{item.name}}

　　收货人电话{{item.mobile}}

　　删除

　　编辑

　　保存

　　前端页面主要展示一个表单和已有收货人信息

　　1.其中几个关键点需要理解

　　a.Form表单，需要绑定一个submit事件，在小程序中，属*为bindsubmit,

　　bindsubmit=”formSubmit” 这里的属*值formSubmit，命名可以为符合规范的任意值，相当于以前html中的 onsubmit=”formSubmit()”,是一个函数名，当提交的时候触发formSubmit这个函数事件，这个函数写在js中。

　　b.其他的属*和之前的HTML差不多，注意的是，表单一定要有name=“value”，后端处理和以前一样，比如name=”username” PHP可以用 $_POST[‘username']来接收。

　　c.由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，

　　注册，这个小程序按钮就是用来开启提交事件的。

　　至于实现小程序循环输出，拆开解

　　d.小程序给我们一个封装好的方法onLoad: function()，当页面加载的时候，调用这个方法。

　　?

　　var app = getApp()

　　Page({

　　data:{},

　　onLoad: function() {

　　var that = this;

　　//收货地址首页

　　wx.request({

　　//缺少用户唯一标识，现在的在服务器的控制器里有一个假id = 2

　　url: 'shop.yunapply/home/shipping/index',

　　method: 'GET',

　　data: {},

　　header: {

　　'Accept': 'application/json'

　　},

　　success: function(res) {

　　that.setData({

　　"addressInfo": res.data.info,

　　})

　　console.log(res.data.info);

　　},

　　fail:function(){

　　wx.showToast({

　　title: '服务器网络错误!',

　　icon: 'loading',

　　duration: 1500

　　})

　　}

　　})

　　}

　　})

　　查

　　收货地址的首页，用于拉取当前用户已有的收货地址

　　?1var that = this;

　　不知道为什么要这样做，可能是为了避免this 冲突或者语意不明确，将当前的对象，赋值给变量that

　　wx.request({})发起s请求

　　url: 'shop/home/shipping/index',所需要请求的网址接口

　　method: 'GET',请求的方式，默认是GET，当时POST的时候，必须声明

　　data: {},发送的请求的数据

　　header: {},发送的头信息，

　　GET方式的头信息为：'Accept': 'application/json'

　　POST方式的头信息为："Content-Type": "application/x--form-urlencoded"

　　success:function() 请求成功调用的方法

　　Fail:function() 请求失败调用的方法

　　?

　　success: function(res) {

　　that.setData({

　　"addressInfo": res.data.info,

　　})

　　},

　　res为调用成功以后服务器端返回的数据，

　　that.setData({"addressInfo": res.data.info,}) 添加数据到当前页面的data对象，键名为addressInfo,键值是返回的数据，我需要的是res的data对象的info对象的所有信息

　　?

　　fail:function(){

　　wx.showToast({

　　title: '服务器网络错误!',

　　icon: 'loading',

　　duration: 1500

　　})

　　}

　　网络请求失败调用的方法

　　showToast类似于JS中的alert，弹出框，title 是弹出框的显示的信息，icon是弹出框的图标状态，目前只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。

　　a.url是你请求的网址，比如以前在前端，POST表单中action=‘index.php'，这里的index.php是相对路径，而小程序请求的网址必须是网络绝对路径。

　　b.'shop.yunapply/home/shipping/index',以GET方式请求HOME模块下的Shipping控制下的index方法

　　c.将得到的值添加到data里

　　看HOME模块下的Shipping控制下的index方法

　　?

　　public function index(){ //$id 为用户名id 等以后可以通过token获取或者session(id)什么的 $use_id = 2; $res = D('Shipping')->getAddress($use_id); if ($res == false){ $this->error('暂无收货地址','',true); }else{ $this->success($res,'',true); }

　　}

　　查看Shipping模型中的getAddress()方法

　　?

　　/** * 获取收货地址信息 * @param $id 当前用户id * @return 属于用户的所有地址 */public function getAddress($id){ $address_list = $this->where(array('user_id'=>$id))->select(); if ($address_list == false){ return false; } return $address_list;}

　　这样就根据用户是否有地址还返回相应的JSON数据

　　本例子的JSON数据是

　　?

　　{"info":[{"id":"4","user_id":"2","name":"addTest","mobile":"15162550544","province":"","city":"","district":"","address":"44563","createtime":"2017-01-10 18:45:27","modifytime":"2017-01-10 18:45:27","default":"0"}],"status":1,"url":""}

　　请求成功以后就将JSON添加到data{}中，并设置键值为addressInfo

　　那么接下来就是将这些信息展示在前端页面上

　　?

　　收货地址{{item.address}}1km

　　收货人{{item.name}}

　　收货人电话{{item.mobile}}

　　删除

　　编辑

　　控制属* wx:for 绑定一个数组，就是JS中的addressInfo这个数组，默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item 。可以根据{{item.address}}、{{item.name}}、{{item.mobile}}、{{item.id}}获取到当前数据的地址、收货人、电话和该条信息的id

　　循环之后就可以按照格式展示所有地址信息了，相当于TP模板中的foreach

　　删

　　在前台模板的循环数据里可以看到这样一条标签

　　?1event.currentTarget.dataset.deleteid;表示事件对象的目标的data-*的值

　　bindtap属*是微信在模板页中绑定点击事件，deleteClick为触发时间的方法名

　　在index.js中，删除代码如下：

　　?

　　//删除地址

　　deleteClick:function(event){

　　var id = event.currentTarget.dataset.deleteid;

　　wx.request({

　　url: 'shop.yunapply/home/shipping/delAddress?id='+id,

　　data: {},

　　method: 'GET',

　　success: function(res){

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

　　wx.showToast({

　　title: res.data.info,

　　icon: 'loading',

　　duration: 1500

　　})

　　}else{

　　wx.showToast({

　　title: res.data.info,

　　icon: 'success',

　　duration: 1000

　　})

　　//删除之后应该有一个刷新页面的效果，等和其他页面刷新跳转一起做

　　}

　　},

　　fail:function(){

　　wx.showToast({

　　title: '服务器网络错误!',

　　icon: 'loading',

　　duration: 1500

　　})

　　}

　　})

　　}

　　点击前端删除按钮的时候，触发deleteClick事件，可以传入一个参数，代表事件对象。

　　event.currentTarget.dataset.deleteid;表示事件对象的目标的data-*的值

　　然后通过GET方式传入url，在服务器端删除功能如下

　　?

　　public function delAddress($id){ $res = D('Shipping')->where(array('id'=>$id))->delete(); if ($res){ $this->success('删除成功','',true); }else{ $this->error('删除失败','',true); }}

　　根据返回的JSON值就可以提示删除成功与否

　　知道了微信小程序怎样删改信息，就可以实现微信小程序清空表单了，是不是很简单呢?对照上面的步骤和代码进行操作吧，你也能成功的。

　　微信小程序清空input怎么弄

　　怎样实现小程序获取表单数据?

　　微信小程序表单提交怎么弄