微信小程序 增、删、改、查操作实例详解(3)

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

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

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

<button formType="submit">注册</button>,这个按钮就是用来开启提交事件的。

d.由于添加地址和编辑地址都是在一个页面的,所以我需要在每个表单中,加一个默认值变量,当点击修改的时候,默认值就显示在输入框中。

e.表单中有一个编辑,绑定了事件editClick,当点击这个按钮的时候,就会进入编辑模式

添加和修改的放在一个函数里面,但是修改数据的显示是另外一个函数

先说修改,点点击编辑的时候,触发editClick事件

JS如下:

editClick:function(event){ var that = this; var id = event.currentTarget.dataset.editid; wx.request({ url: 'https://shop.yunapply.com/home/shipping/edit?id='+id, data: {}, method: 'GET', success: function(res){ if(res.data.status == 0){ wx.showToast({ title: res.data.info, icon: 'loading', duration: 1500 }) }else{ that.setData({ "addressEdit": res.data.info, }) } }, fail:function(){ wx.showToast({ title: '服务器网络错误!', icon: 'loading', duration: 1500 }) } }) },

为了更好理解,贴个图

微信小程序 增、删、改、查操作实例详解

最下面有一个保存按钮,当点击编辑的时候,触发editClick:function(event),这个event是当前触发事件的对象,

var id = event.currentTarget.dataset.editid;  就是获取当前事件对象的dataset中的editid的值,这里id是当前地址的id

url: 'https://shop.com/home/shipping/edit?id='+id

Wx.request  的url,将id值放在url上,作为GET参数,传递到服务器。

data: {},是需要额外传递的数据

method: 'GET', 是数据传递方式  默认是“GET”,保持大写

data:{mobile:e.detail.value.mobile,password:e.detail.value.password},

这里的data就是POST给服务器端的数据 以{name:value}的形式传送

success:function()是请求状态成功触发是事件,也就是200的时候,注意,请求成功不是操作成功,请求只是这个程序到服务器端这条线的通的。

fail:function()就是网络请求不成功,触发的事件。

这里的一段代码是和PHP后端程序有关系的,具体流程是这样的,

1.GET通过数据到https://shop.com/home/Shipping/edit这个接口,用过THINKPHP的就会知道是HOME模块下的Shipping控制下的edit方法

2.后端PHP代码如下:

控制器 ShippingController.class.php

public function edit($id) { $res = D('Shipping')->find($id); $this->success($res,'',true); }

也就是说将这条数据取出来,没什么好说的。

that.setData({ "addressEdit": res.data.info, }) }

这里请求成功以后,调用小程序 setData方法,将服务器端返回的信息放到addressEdit[]中,然后在前端页面调用{{addressEdit.id}}、{addressEdit.name}}、{addressEdit.mobile}}、{addressEdit.address}}将数据展示出来,这就是修改时候的操作。

接下来是提交表单的操作

Js代码如下

addSubmit:function(e){ if(e.detail.value.mobile.length==0||e.detail.value.name.length==0 ||e.detail.value.address.length==0){ wx.showToast({ title: '收货人所有信息不得为空!', icon: 'loading', duration: 1500 }) }else if(e.detail.value.mobile.length != 11){ wx.showToast({ title: '请输入11位手机号码!', icon: 'loading', duration: 1500 }) }else{ wx.request({ url: 'https://shop.yunapply.com/home/shipping/save', header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", data:{id:e.detail.value.id,mobile:e.detail.value.mobile,name:e.detail.value.name,address:e.detail.value.address}, 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 }) setTimeout(function(){ wx.navigateTo({ url:'../address/index' }) },1000) } }, fail:function(){ wx.showToast({ title: '服务器网络错误!', icon: 'loading', duration: 1500 }) } }) } }

在前端的FORM表单中,当点击formtype=“submit”这个按钮的时候,触发addSubmit事件,前面的if都是JS验证,防止用户不填写信息。

1.其他的request请求差不多,找几个不一样的

url: 'https://shop.yunapply.com/home/shipping/save',

调用服务器端的save方法

header: { "Content-Type": "application/x-www-form-urlencoded" },

由于POST和GET传送数据的方式不一样,POST的header必须是

"Content-Type": "application/x-www-form-urlencoded"

GET的header可以是 'Accept': 'application/json'

data:{id:e.detail.value.id,mobile:e.detail.value.mobile,name:e.detail.value.name,address:e.detail.value.address},

这里是需要POST到服务器端的数据

Save方法代码

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwdfjy.html