异步渲染页面怎么点击checkbox获取value值
前后端分离时 后端向前端传递json数据 前端根据需要进行页面渲染 因为是异步渲染 想要获取获取渲染数据里面的值时获取不到的
介绍两个方法:
1,设置全局变量 即渲染时在html页面设置全局变量
如图:

我们要往ul标签内渲染数据
<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值的更多相关文章
- heightcharts点击曲线图获取返回值的问题(ios点击图表第一次无法触发点击事件解决方法)
需求:用的heightcharts插件,点击曲线图想获得所点击点的返回值,如图 问题代码: (function chart_line(){ var data={"title":[& ...
- JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值
//**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的ID var o ...
- table表格中 ,点击checkbox 的value值 相加
<!DOCTYPE html> <html> <head> <title>简单的行列相加求和处理</title> <script sr ...
- jsp页面执行java语法,获取的值在页面调用
首先在页面头引用用到类的包路径 写需要执行的java语法 页面转换引用 <!-- 引用包路径 --> <%@ page language="java" impor ...
- 从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法
最近复习vue的时候遇到了一个很奇怪的问题,我们直接从实例中看: <div id="app"> <child ref="child">& ...
- 页面中的checkbox多选值获取
依据name名称获取选中值 var arr=document.getElementsByName("name");arr是一个数组,就是所有checkbox的值:for(i=0;i ...
- Vue为何采用异步渲染
Vue为何采用异步渲染 Vue在更新DOM时是异步执行的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,如果同一个watcher被多次触发,只会被推入到队列中一次 ...
- 爬虫动态渲染页面爬取之Splash的介绍和使用
Splash是一个JavaScript渲染服务,是一个带有HTTP API的轻量级浏览器,同时它对接了Python中的Twisted和QT库.利用它,我们同样可以实现动态渲染页面的抓取. 1. 功能介 ...
- 我是这样使用template.js来异步渲染数据的
总监的代码用的是define+module.exports,为了效率先没去了解那一块,在github上找了一款功能单一的template.js来使用 https://github.com/yanhai ...
随机推荐
- Kafka控制器选举流程剖析
1.概述 平时在使用Kafka的时候,可能关注的更多的是Kafka系统层面的.今天来给大家剖析一下Kafka的控制器,了解一下Kafka控制器的选举流程. 2.内容 Kafka控制器,其实就是一个Ka ...
- jumpserver篇--安装
参考:https://github.com/jumpserver/jumpserver/wiki/%E5%AE%89%E8%A3%85%E5%9B%BE%E8%A7%A3 服务器环境: ip:192. ...
- Dockerfile 中的 COPY 与 ADD 命令
Dockerfile 中提供了两个非常相似的命令 COPY 和 ADD,本文尝试解释这两个命令的基本功能,以及其异同点,然后总结其各自适合的应用场景. Build 上下文的概念 在使用 docker ...
- jmeter 分布式压测(windows)
单台压测机通常会遇到客户端瓶颈,受制于客户机的性能.可能由于网络带宽,CPU,内存的限制不能给到服务器足够的压力,这个时候你就需要用到分布式方案来解决客户机的瓶颈,压测的结果也会更加接近于真实情况. ...
- 关于 JavaScript 的 null 和 undefined,判断 null 的真实类型
null.undefined 博客地址: https://ainyi.com/39 undefined:表示一个变量最原始的状态,而非人为操作的结果 null:表示一个对象被人为的重置为空对象,而非一 ...
- c# IO操作
今天我们主要讨论的IO的一些操作,首先我们先引入三个变量: /// <summary> /// 配置绝对路径 /// </summary> private static str ...
- My操作小技巧
1.当我们新增一条数据之后想要获取其自增长的id,可以紧随新增语句后调用 SELECT last_insert_id();即可获得,一般搭配变量一起使用 SELECT @newUserId:=last ...
- JsonConvert.DeserializeObject反序列化
JObject ci = JsonConvert.DeserializeObject<JObject>(row); string s = ci["txtContent" ...
- [MySQL] mysql的事务隔离和幻读和死锁问题
1.系统要通过严格的ACID测试,ACID表示原子性/一致性/隔离性/持久性原子性:一个事务必须被视为一个不可分割的最小工作单元一致性:数据库总是从一个一致性的状态转换到另外一个一致性的状态隔离性:通 ...
- JavaScript 为什么要有 Symbol 类型?
Symbols 是 ES6 引入了一个新的数据类型 ,它为 JS 带来了一些好处,尤其是对象属性时. 但是,它们能为我们做些字符串不能做的事情呢? 在深入探讨 Symbol 之前,让我们先看看一些 J ...