前后端分离时 后端向前端传递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. 基于 Nginx 的 HTTPS 性能优化

    前言 分享一个卓见云的较多客户遇到HTTPS优化案例. 随着相关浏览器对HTTP协议的“不安全”.红色页面警告等严格措施的出台,以及向 iOS 应用的 ATS 要求和微信.支付宝小程序强制 HTTPS ...

  2. 学习编写Dockerfile

    前言 我们学习docker的话,其主要目的还是要用来改变我们部署应用程序的传统习惯,达到解放生产力,解放人力的目的.这篇则自己来熟悉一下dockerfile常用命令.并且尝试改变下生产环境手动部署应用 ...

  3. .Net语言 APP开发平台——Smobiler学习日志:如何快速实现手机上的资源上传功能

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的“Smobil ...

  4. IIS配置HTTPS

    1,新建网站,选中类型为 https,然后更改SSL证书为你配置的SSL证书, 对于SSL证书的配置是这样的 点开第二步,然后点击 创建自签名证书 确定以后点开网站看到有个SSL, 双击进去,再选中 ...

  5. 数据结构(java版)学习笔记(三)——线性表之单链表

    单链表的优点: 长度不固定,可以任意增删. 单链表的缺点: 存储密度小,因为每个数据元素,都需要额外存储一个指向下一元素的指针(双链表则需要两个指针). 要访问特定元素,只能从链表头开始,遍历到该元素 ...

  6. 程序员50题(JS版本)(三)

    程序11:判断101~200之间有多少个素数,并输出所有素数 for(var i=101,num=0;i<=200;i++){ for(var j=2;j<=i;j++){ if(i%j= ...

  7. vue动画及其原理

    1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2,  我们以两张 ...

  8. java-文件读取

    1.利用递归读取文件 (1)NotifyFolder.java package com.etc; import java.io.File; import java.io.IOException; im ...

  9. 【AO笔记】有关TIN数据集的常用介绍

    写论文查了很多TIN的接口和属性,特此来记录一下. 转载请注明出处:博客园@秋意正寒,B站同名. 未完待续 1. Tin数据集在ArcGIS中的描述 Tin数据集在磁盘中,被ArcGIS以文件夹形式管 ...

  10. python数据处理excel和pdf,并打包成exe

    之前零散的用过一点python做数据处理,这次又遇到一个数据处理的小功能,因此,记录一下整个流程,方便以后查阅. 功能要求:读取excel,找指定的PDF文件的页数是否与excel中记录的一致 整个处 ...