異步渲染頁面怎麽點擊checkbox獲取value值
阿新 • • 發佈:2019-04-10
true params end admin then 標簽 num min cart
前後端分離時 後端向前端傳遞json數據 前端根據需要進行頁面渲染 因為是異步渲染 想要獲取獲取渲染數據裏面的值時獲取不到的
介紹兩個方法:
1,設置全局變量 即渲染時在html頁面設置全局變量
如圖:
我們要往ul標簽內渲染數據
script代碼<script> var rest = $.cookie(‘username‘) $(".Show").html(rest); var username = $.cookie(‘username‘) let param = new URLSearchParams(); param.append(‘username‘,username); axios({ url:‘http://127.0.0.1:8000/md_admin/carlist‘, data:param, // async:false, method:‘post‘, responseType:‘json‘ }) .then(function(obj){ console.log(obj.data); let pro_list = JSON.parse(obj.data[1]); let price_list = obj.data[0] let sum_pro = obj.data[2] let ul = ‘‘ for (let i=0;i<pro_list.length;i++){ ul += ‘<ul class="cart_list_td clearfix" v-for="(sku,index) in cart" id="porcdesc" ><li class="col01"><input type="checkbox" name="procduc_id" v-model="sku.selected" @change="update_selected(index)" value="‘+pro_list[i][‘pk‘]+‘,‘+price_list[pro_list[i][‘pk‘]]*pro_list[i][‘fields‘][‘price‘]+‘" value1="‘+price_list[pro_list[i][‘pk‘]]+‘" onclick="onlyone()"></li><li class="col02"><img src=‘+pro_list[i][‘fields‘][‘img‘]+‘></li><li class="col03" id="prodtit">‘+pro_list[i][‘fields‘][‘title‘]+‘</li><li class="col05" id="prodpic">‘+pro_list[i][‘fields‘][‘price‘]+‘元</li><li class="col06"><div class="num_add"><a class="add fl" onclick="addprod(‘+pro_list[i][‘pk‘]+‘,\‘+\‘)">+</a><input v-model="sku.count" @focus="origin_input=sku.count" @blur="on_input(index)" type="text" class="num_show fl" value=‘+price_list[pro_list[i][‘pk‘]]+‘ ><a @click="on_minus(index)" class="minus fl" onclick="addprod(‘+pro_list[i][‘pk‘]+‘,\‘-\‘)">-</a></div></li><li class="col07">‘+price_list[pro_list[i][‘pk‘]]*pro_list[i][‘fields‘][‘price‘]+‘ 元</li><li class="col08"><a @click="on_delete(index)" onclick="delpro(‘+pro_list[i][‘pk‘]+‘)">刪除</a></li><li id="pkid" value="‘+pro_list[i][‘pk‘]+‘"></ul>‘ } $("#pro_list").html(ul); $(".sum_pro").html(sum_pro); }); function checkorder(){ var _items = []; var items = document.getElementsByName(‘procduc_id‘); for(var i=0;i<items.length;i++) { if (items[i].checked){_items.push(items[i].value);}} console.log(_items); let param = new URLSearchParams(); param.append(‘_items‘,_items); axios({ url:‘http://127.0.0.1:8000/md_admin/orderlist‘, data:param, method:‘post‘, responseType:‘text‘, }) .then(function(obj){ console.log(obj.data); // window.location.href=‘http://127.0.0.1:8080/cart.html‘ }) }
通過設置name選擇器procduc_id來獲取iinput中value內的值
第二個方法是在全局設置Ajax屬性
$.ajaxSetup({
async: false
});
再用post,get就是同步的了
異步渲染頁面怎麽點擊checkbox獲取value值