網絡請求提交表單 · 小程序-shop商城開發手冊

>[info] js文件是邏輯控制，主要是它發送請求和接收數據， json 用于此頁面局部配置并且覆蓋全局app.json配置， wxss用于頁面的樣式設置， wxml就是頁面，相當于html >[info]具體流程是這樣的 1.POST提交數據到 http://127.0.0.1/miniApp/form.php 這個接口 2.PHP根據POST過來的數據，結合數據庫進行二次驗證，如果操作成功，返回什么，如果操作失敗，返回什么 ## 表單視圖 <view class="page"> <form bindsubmit="formSubmit"> <view class="weui-cells weui-cells_form"> <view class="weui-cell"> <view class="weui-cell__hd"> <view class="weui-label">name</view> </view> <view class="weui-cell__bd"> <input type="text" name="name" placeholder="請輸入用戶名" auto-focus/> </view> </view> <view class="weui-cell"> <view class="weui-cell__hd"> <view class="weui-label">tel</view> </view> <view class="weui-cell__bd"> <input type="text" name="tel" placeholder="請輸入手機號" auto-focus/> </view> </view> <view class="weui-cell"> <view class="weui-cell__hd"> <view class="weui-label">password</view> </view> <view class="weui-cell__bd"> <input type="password" name="password" placeholder="請設置6-20位登錄密碼" auto-focus/> </view> </view> <button class="weui-btn weui-btn_info" formType="submit">注冊</button> </view> </form> </view> ## 關鍵點 1、Form表單，需要綁定一個 submit 事件，在小程序中，屬性為 bindsubmit , <form bindsubmit="formSubmit"></form> 這里的屬性值 formSubmit ，命名可以為符合規范的任意值，相當于以前 html 中的 onsubmit=”formSubmit()”,是一個函數名，當提交的時候觸發 formSubmit 這個函數事件，這個函數寫在js中。 2、注意點： >[warning]其他的屬性和之前的HTML差不多；注意的是，表單一定要有name=“value；后端處理和以前一樣，比如name=”username”；PHP可以用$_POST[‘username’]來接收。 3、由于小程序沒有input submit這個按鈕，所以在每個form表單中都要有一個提交按鈕，<button formType="submit">注冊</button>，這個按鈕就是用來開啟提交事件的。 js接口處理 // form.js var app = getApp() Page({ data: {}, }, formSubmit: function(e) { console.log(e); if(e.detail.value.name.length==0 || e.detail.value.tel.length==0){ wx.showToast({ title: '手機號碼或密碼不得為空!', icon: 'loading', duration: 1500 }) setTimeout(function(){ wx.hideToast() },2000) } else { wx.request({ url: 'http://127.0.0.1/miniApp/form.php', data: {name:e.detail.value.name,tel:e.detail.value.tel,password:e.detail.value.password}, method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: { "Content-Type": "application/x-www-form-urlencoded" }, // 設置請求的 header success: function(res){ console.log(res); wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) // success }, fail: function(res) { console.log(res); // fail } }) } } }) ## 關鍵點 1、Page()這個方法是必須有的，里面放置js對象，用于頁面加載的時候，呈現效果 2、data: {},數據對象，設置頁面中的數據，前端可以通過讀取這個對象里面的數據來顯示出來。 3、formSubmit: function 小程序中方法都是方法名:function()，其中function可以傳入一個參數，作為觸發當前時間的對象下面是函數的執行，由于驗證太多，我只拿一部分出來理解。 if(e.detail.value.name.length==0 || e.detail.value.tel.length==0){ wx.showToast({ title: '手機號碼或密碼不得為空!', icon: 'loading', duration: 1500 }) setTimeout(function(){ wx.hideToast() },2000) } ## e參數的信息這里的e，就是當前觸發事件的對象，類似于 html onclick=“foo(this)”this 對象，小程序封裝了許多內置的調用方法， `e.detail.value.name `就是當前對象 `name=”name”` 的對象的值 `e.detail.value.mobile.name` 就是這個值的長度 ## showToast showToast類似于JS中的alert，彈出框，title 是彈出框的顯示的信息，icon是彈出框的圖標狀態，目前只有loading 和success這兩個狀態。duration是彈出框在屏幕上顯示的時間。 ## wx.request 詳細參考上一節的描述 1、url 填寫表單提交后請求的地址 2、由于POST和GET傳送數據的方式不一樣 POST的header必須是 "Content-Type": "application/x-www-form-urlencoded" GET的header可以是 'Accept': 'application/json' 3、一定要寫明method：“POST” 默認是“GET”，保持大寫 4、這里的data就是POST給服務器端的數據以{name:value}的形式傳送 data:{name:e.detail.value.name,tel:e.detail.value.tel,password:e.detail.value.password},