异步渲染页面怎么点击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 ...
随机推荐
- 环境与工具3:从打字开始 | vim | sublime
作为程序员,最不爽的一件事是被亲戚叫去修电脑. "喂,怎么跟你们讲,我是写代码的,不是修电脑的!什么?代码是什么?!" 小白:为什么程序员就不能修电脑了? 小程:会不会修都有可能, ...
- Oracle 查询结果集行数分析
本人曾去某金融软件公司面试,交流中面试官问的一个问题是:"如果有 A.B 两张表,A 表中有 2 条数据,B 表中有 200 条数据,请问 SELECT * FROM A,B 能查出多少条数 ...
- uabntu18.04 安装mysql5.7
原以为安装mysql就是一键的事情,结果还弄了有一阵子... 首先需要安装mysql的服务器.客户端和依赖, sudo apt-get install mysql-serversudo apt ins ...
- Centos 7 Puppet之foreman介绍安装测试
一.简介 1.前言(引用一下网上的资料) 随着企业的 Linux 系统数量越来越多,管理问题便成为一个相对麻烦并需要急 迫解决的问题,这里有 2 个 Key Message:1)统一管控体系非常重要, ...
- Request.Params
在开发中有时会用到Request.Params["id"]来获取参数,那么到底是从什么地方接收参数呢? 一般情况下,有三种方式进行参数传递1.GET 方式,通过url传递,如?id ...
- 面向对象的一小步:添加ActiveRecord的Scope功能
问题场景 我们用Yii2的ActiveRecord功能非常的方便,假如我们有个Model叫Student,那么ActiveQuery可以通过这种方式轻便地获得: $query = Student::f ...
- arcgis api 3.x for js 入门开发系列十叠加 SHP 图层(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- AEAI HR开源人力资源管理v1.6.0发版公告
1 升级说明 AEAI HR v1.6.0版是AEAI HR v1.5.2版人力资源管理系统的升级版本,本次升级的系统是基于AEAI DP 3.8.0_20170228进行打包部署的,升级内容主要是针 ...
- android如何获取SHA1
某些Google Play服务(例如Google登录和App Invites)要求我们提供签名证书的SHA-1,以便google paly为我们的应用创建OAuth2客户端和API密钥. 那么如何获取 ...
- pwn with glibc heap(堆利用手册)
前言 对一些有趣的堆相关的漏洞的利用做一个记录,如有差错,请见谅. 文中未做说明 均是指 glibc 2.23 相关引用已在文中进行了标注,如有遗漏,请提醒. 简单源码分析 本节只是简 ...