1. 程式人生 > >關於AJAX請求後臺資料,接收後臺返回的JSON資料,以及前臺遍歷json資料和append追加元素。

關於AJAX請求後臺資料,接收後臺返回的JSON資料,以及前臺遍歷json資料和append追加元素。

在這兩天的學習以及練習過程中,需要涉及到微信小程式的一些東西。在小程式中,是不能直接跳轉後臺邏輯來獲取資料,而是通過使用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。