ajax 动态为<a> href 赋值,总是不执行的原因

当使用Ajax尝试动态地为HTML中的a标签设置href属性时,可能会遇到该操作不执行的问题。解决方法是将Ajax请求设置为同步。通过在全局变量中声明并设置Ajax调用为同步,确保在a标签的href更新之前,数据已经成功获取。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题是这样的:

<a href="JavaScript:void(0)" onclick="loadSalesInfo(this,'<bean:write name="list" property="custNo"/>')">拨打</a>

点击“拨打”,调用loadSalesInfo函数,该函数通过jquery的ajax调用返回是否限制拨打,如代码:

var vlink;
function loadSalesInfo(link,salesNo)
	{
        var queryUrl="/servlet/AjaxValid";
        vlink = link;
        jQuery.post(queryUrl,{method:'newChanceControl'},function(result){
  						var flag = result;
  						if(flag == '0'){
  							alert("提示:当前时间不允许外拨!");
  							return false;
  						}else{
  							 if(vlink.disabled==false){
  								 vlink.target="leftframe";
  								 vlink.disabled=true;
  								 vlink.href="salesBaseAction.do?method=loadCustForSalesByCustNo&custno="+salesNo;
  						   	  }else{
  						   		vlink.target="";
  						   		vlink.href="JavaScript:void(0)";
  						   	  }
  							}
        });
	}

现象是vlink.href可以正常执行,但是总是不调用action。经过一天的郁闷,终于知道原因了:因为ajax默认调用是异步的,所以不等ajax调用处理回调函数为href赋值就直接发起了href,所以第一次点击不会调用action,第二次点击的时候会调用action,这是因为第一次ajax执行完成为href赋值了。另外<a> 属性onclick的优先级高于href,所以onclick return false就可以不执行href了。

解决方法:将ajax调用方法改为同步,方法为加上全局变量,声明ajax调用为同步:

$.ajaxSetup({
	    async : false
	});

这样href的执行就必须等待function中ajax调用完成后才会触发,就得到了想要的结果。


<!-- 权限管理 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../css/diy.css"> <style> .layui-body { overflow-x: scroll; } </style> </head> <body> <div class="section1"> <!-- 内容主体区域 --> <div class="manu auth" style="padding: 15px;"> <form class="layui-form" action=""> <div class="form-input-box-t layui-form-item"> <div class="input-box"> <label class="layui-form-label">权限名</label> <div class="layui-input-block input-i block"> <input type="text" name="mod_name" required lay-verify="required" autocomplete="off" class="layui-input"> <!--通过lay-verify="required"实现输入验证,确保必填字段非空--> </div> </div> <div class="input-box"> <!--查询部分--> <label class="layui-form-label">用户组</label> <div class="layui-input-block select block"> <select name="user_group" lay-filter="required" id="user_group"> <option value=""></option> </select> </div> </div> <div class="input-box"> <label class="layui-form-label">添加权限</label> <div class="layui-input-block select block"> <select name="add" lay-filter="required"> <option value=""></option> <option value="0">无</option> <option value="1">有</option> </select> </div> </div> <div class="input-box"> <label class="layui-form-label">修改权限</label> <div class="layui-input-block select block"> <select name="set" lay-filter="required"> <option value=""></option> <option value="0">无</option> <option value="1">有</option> </select> </div> </div> <div class="input-box"> <label class="layui-form-label">删除权限</label> <div class="layui-input-block select block"> <select name="del" lay-filter="required"> <option value=""></option> <option value="0">无</option> <option value="1">有</option> </select> </div> </div> <div class="input-box"> <label class="layui-form-label">查询权限</label> <div class="layui-input-block select block"> <select name="get" lay-filter="required"> <option value=""></option> <option value="0">无</option> <option value="1">有</option> </select> </div> </div> </div> </form> <div class="buts"> <button type="button" class="layui-btn layui-btn-normal" id="inquire"><span>查询</span></button> <button type="button" class="layui-btn layui-btn-normal" id="reset"><span>重置</span></button> </div> <div class="Customize-the-box"> <div class="circle"></div> <div class="circle"></div> <div class="card-inner"></div> </div> </div> <h1>数据列表</h1> <div class="table"> <table class="layui-hide" id="newsClassification" lay-filter="newsClassification"></table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="add">修改</button> </div> </script> </div> </div> <script src="../../layui/layui.js"></script> <script src="../../js/axios.min.js"></script> <script src="../../js/index.js"></script> <script src="../../js/base.js" charset="utf-8"></script> <script> var BaseUrl = baseUrl() layui.use(['element', 'layer', 'util'], function () { var element = layui.element , table = layui.table , layer = layui.layer , util = layui.util , $ = layui.$; let personInfo = JSON.parse(sessionStorage.personInfo) let user_group = personInfo.user_group let token = sessionStorage.token || null //头部事件 util.event('lay-header-event', { //左侧菜单事件 menuLeft: function (othis) { layer.msg('展开左侧菜单的操作', {icon: 0}); } , menuRight: function () { layer.open({ type: 1 , content: '<div style="padding: 15px;">处理右侧面板的操作</div>' , area: ['260px', '100%'] , offset: 'rt' //右上角 , anim: 5 , shadeClose: true }); } }); // table 事件 table.render({ elem: '#newsClassification' , toolbar: true , url: BaseUrl + '/api/auth/get_list' , headers: { 'x-auth-token': token, 'Content-Type': 'application/json' } ,limits: [10] , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 //,curr: 5 //设定初始在第 5 页 , groups: 1 //只显示 1 个连续页码 , first: false //显示首页 , last: false //显示尾页 } , cols: [[ {type: 'checkbox'} , {field: 'user_group', width: '10%', title: '用户组'} , {field: 'mod_name', width: '10%', title: '权限名称', templet: function (d) { if (d.path.replace('/'+d.table_name+'/','')=='table') { return "<div>"+d.mod_name+"后台列表</div>" } if (d.path.replace('/'+d.table_name+'/','')=='view') { return "<div>"+d.mod_name+"后台详情</div>" } if (d.path.replace('/'+d.table_name+'/','')=='list') { return "<div>"+d.mod_name+"前台列表</div>" } if (d.path.replace('/'+d.table_name+'/','')=='details') { return "<div>"+d.mod_name+"前台详情</div>" } if (d.path.replace('/'+d.table_name+'/','')=='edit') { return "<div>"+d.mod_name+"前台编辑</div>" } } } , { field: 'add', width: '10%', title: '<span>添加</span>权限', templet: function (d) { if (d.add == '0') { return "<div>无</div>" } else { return "<div>有</div>" } } } , { field: 'del', width: '10%', title: '<span>删除</span>权限', templet: function (d) { if (d.del == '0') { return "<div>无</div>" } else { return "<div>有</div>" } } } , { field: 'set', width: '10%', title: '修改权限', templet: function (d) { if (d.set == '0') { return "<div>无</div>" } else { return "<div>有</div>" } } } , { field: 'get', width: '10%', title: '<span>查询</span>权限', templet: function (d) { if (d.get == '0') { return "<div>无</div>" } else { return "<div>有</div>" } } } , { field: 'create_time', width: '15%', title: '新增时间', sort: true, templet: "<div>{{layui.util.toDateString(d.create_time, 'yyyy-MM-dd HH:mm:ss')}}</div>" } , { field: 'update_time', width: '15%', title: '更新时间', sort: true, templet: "<div>{{layui.util.toDateString(d.update_time, 'yyyy-MM-dd HH:mm:ss')}}</div>" } , {field: 'operate', title: '操作', toolbar: "#toolbarDemo"} ]] , page: true, request: { limitName: 'size' }, response: { statusName: 'code', //规定返回/Back的状态码字段为code statusCode: 200 //规定成功的状态码味200 }, parseData: function (res) { return { "code": 200, "msg": "", "count": res.result.count, "data": res.result.list } }, where: {like: 0, size: 10} }); layui.table.on('tool(newsClassification)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值) var tr = obj.tr; //获得当前行 tr 的DOM对象 if (layEvent == "add") { let auth_id = data.auth_id // window.location = ('./view.html?' + auth_id) layopen_dateil('./view.html?' + auth_id) } }); // 请求参数: let request = {like: 0, size: 10, page: 1, mod_name: '', user_group: '',add:'',set:'',del:'',get:'',orderby: 'create_time desc'} // <span>重置</span>/Reset参数 let resetName = {like: 0, size: 10, page: 1, orderby: 'create_time desc'} fun('newsClassification', BaseUrl + '/api/auth/del', 'auth_id', request, resetName) async function get_list_user_group() { $.ajax({ url: BaseUrl + "/api/user_group/get_list", type: "get", async: false, success: function (data) { if (data && typeof data === 'string'){ data = JSON.parse(data); } if (data.result) { // 拿到单选框的父级节点 let select = document.querySelector("#user_group") let op1 = document.createElement('option') select.appendChild(op1) // 收集数据 长度 let count // 收集数据 数组 let arr = [] count = data.result.count arr = data.result.list for (let i = 0; i < arr.length; i++) { // 创建节点 let op = document.createElement('option') // 给节点赋值 op.innerHTML = arr[i].name op.value = arr[i].name // 新增/Add节点 select.appendChild(op) layui.form.render('select') } } } }); } get_list_user_group(); }); </script> </body> </html> 分析以上代码,哪个代码对应哪个功能就行,要自己拓展
05-28
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值