前后端分离时 后端向前端传递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值的更多相关文章

  1. heightcharts点击曲线图获取返回值的问题(ios点击图表第一次无法触发点击事件解决方法)

    需求:用的heightcharts插件,点击曲线图想获得所点击点的返回值,如图 问题代码: (function chart_line(){ var data={"title":[& ...

  2. JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值

    //**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的ID var o ...

  3. table表格中 ,点击checkbox 的value值 相加

    <!DOCTYPE html> <html> <head> <title>简单的行列相加求和处理</title> <script sr ...

  4. jsp页面执行java语法,获取的值在页面调用

    首先在页面头引用用到类的包路径 写需要执行的java语法 页面转换引用 <!-- 引用包路径 --> <%@ page language="java" impor ...

  5. 从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法

    最近复习vue的时候遇到了一个很奇怪的问题,我们直接从实例中看: <div id="app"> <child ref="child">& ...

  6. 页面中的checkbox多选值获取

    依据name名称获取选中值 var arr=document.getElementsByName("name");arr是一个数组,就是所有checkbox的值:for(i=0;i ...

  7. Vue为何采用异步渲染

    Vue为何采用异步渲染 Vue在更新DOM时是异步执行的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,如果同一个watcher被多次触发,只会被推入到队列中一次 ...

  8. 爬虫动态渲染页面爬取之Splash的介绍和使用

    Splash是一个JavaScript渲染服务,是一个带有HTTP API的轻量级浏览器,同时它对接了Python中的Twisted和QT库.利用它,我们同样可以实现动态渲染页面的抓取. 1. 功能介 ...

  9. 我是这样使用template.js来异步渲染数据的

    总监的代码用的是define+module.exports,为了效率先没去了解那一块,在github上找了一款功能单一的template.js来使用 https://github.com/yanhai ...

随机推荐

  1. 阿里云ACE共创空间——MQ消息队列产品测试

    一.产品背景消息队列是阿里巴巴集团自主研发的专业消息中间件. 产品基于高可用分布式集群技术,提供消息订阅和发布.消息轨迹查询.定时(延时)消息.资源统计.监控报警等一系列消息云服务,是企业级互联网架构 ...

  2. [五]类加载机制双亲委派机制 底层代码实现原理 源码分析 java类加载双亲委派机制是如何实现的

      Launcher启动类 本文是双亲委派机制的源码分析部分,类加载机制中的双亲委派模型对于jvm的稳定运行是非常重要的 不过源码其实比较简单,接下来简单介绍一下   我们先从启动类说起 有一个Lau ...

  3. https 加密、http2.0、keep-alive

    原文地址:https://ainyi.com/44 HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议 ...

  4. (摘)使用 .NET Core 实现依赖关系注入

    为什么使用依赖关系注入? 使用 .NET,通过 new 运算符(即,new MyService 或任何想要实例化的对象类型)调用构造函数即可轻松实现对象实例化.遗憾的是,此类调用会强制实施客户端(或应 ...

  5. Mysql is null 索引

    看到很多网上谈优化mysql的文章,发现很多在谈到mysql的null是不走索引的,在此我觉得很有必要纠正下这类结论.mysql is null是有索引的,而且是很高效的,(版本:mysql5.5)表 ...

  6. 对HTML5标签的认识(二)

    ---恢复内容开始--- 这次随笔主要讲一下列表标签.链接标签.和表格标签.图像标签.音频标签.及视频标签的运用及作用. 一.<ul>和<ol> 首先先了解一下<ul&g ...

  7. 解决echarts饼图不显示数据为0的数据

    如图所示 饼图数据为0但是还是会显示lableline和lable 解决方法 var echartData = [{ value: data_arry[0]==0?null:data_arry[0], ...

  8. 老王说JavaDoc

    开场白说点东西: { 抓住客户的痛点.痒点.爽点,提出我们产品的核心价值. 产品定位 技术架构 以微服务为核心的前后端分离,业务积木装配式技术架构.传感器采集,物联网+互联网转换,大数据分布式.存储. ...

  9. JAVA程序员学PHP

    工作之余,趁着五一假期学习下PHP,都说PHP是世界上最美的语言,而且现在应用的有这么广泛,在短期时间内在编程的市场上打得火热,好奇心趋势我去学习一下,下面便是我学习PHP记录下来的过程,和大家分享一 ...

  10. html的标签分类————可以上传的数据篇

    html的标签可以分为: 块级标签:div(白板),H系列(加大加粗,H1—H7,字体一般逐渐变小,一般用作标题),p标签(段落之间有间距) 行内标签:span(白板) 此外,标签之间是可以嵌套的.为 ...