關於AJAX請求後臺資料,接收後臺返回的JSON資料,以及前臺遍歷json資料和append追加元素。
阿新 • • 發佈:2018-12-13
在這兩天的學習以及練習過程中,需要涉及到微信小程式的一些東西。在小程式中,是不能直接跳轉後臺邏輯來獲取資料,而是通過使用AJAX傳值和AJAX請求,來向後臺邏輯傳遞資訊。
1,比如說註冊,填寫資訊之後,通過AJAX傳遞給後臺,後臺處理返回是否註冊成功的JSON資料,前臺再加以分析是否註冊成功,並反饋給客戶。
例如:
註冊按鈕的onclick="add()",呼叫add方法
function add(){ param = {openid:'abcde' ,truename:$("#truename").val() ,sex:$("#sex").val() ,tel:$("#tel").val() ,info:$("#info").val() ,province_id:$("#province_id").val() ,city_id:$("#city_id").val() ,area_id:$("#area_id").val() } $.ajax({ url:'此處是邏輯後臺的真實地址,http開頭的', type:'post', data:param, success:function(res){ console.log(res); } }); }
2,接受後臺返回的json資料
後臺通過echo json_encode($變數),輸出之後,在前臺我們就需要用$.getJSON來獲取
getJSON的格式
$.getJSON('URL','data',function( ){ })
在標準網頁中,URL可以寫成內鏈,在小程式中,URL就要寫成外鏈了。data (可選引數) 傳送至伺服器的 key/value 資料。
在我們獲取到後臺返回的json資料的時候,往往是陣列,我們就需要遍歷,並且追加到html元素中去。
這就要使用$.each
$.each(data,function(a,b){})
data:是獲取到的後臺json資料,a:陣列下標,b:json物件
在遍歷中,我們需要通過append來追加到html元素中去。
$("ul").append("<li>"+b.name+"</li>"),append是jquery中的追加子元素,我們選擇了ul為母元素,那麼我們就是在ul裡邊追加li。