异步渲染页面怎么点击checkbox获取value值

2021年09月15日 阅读数:1
这篇文章主要向大家介绍异步渲染页面怎么点击checkbox获取value值,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

先后端分离时 后端向前端传递json数据  前端根据须要进行页面渲染 由于是异步渲染 想要获取获取渲染数据里面的值时获取不到的html

介绍两个方法:前端

1,设置全局变量 即渲染时在html页面设置全局变量 ios

如图:ajax

咱们要往ul标签内渲染数据json

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内的值axios

第二个方法是在全局设置Ajax属性后端

$.ajaxSetup({
async: false
});
再用post,get就是同步的了cookie