ajax动态为a标签href赋值不执行跳转的原因分析及解决

由于一中考评系统要加入一个新的功能“调查问卷”，我想沿用别人做好的调查问卷，用别人的有一个好处就是：人家做的专业，界面美化等非常人性化，但是它需要你每次设置完调查问卷后发布一下网址，客户端访问的每次都是变动的地址。

客户端每次点击“调查问卷”，就会跳转到相应页面：
 
点击“调查问卷”即进入调查问卷页面：
 
我使用a 标签，每次访问管理员提交的“调查问卷”


代码如下:

<li><a href="" onclick="meizz(this)">调查问卷</a></li>

点击“调查问卷”，调用meizz函数，该函数通过ajax调用返回要访问的“调查问卷”网址：


代码如下:

<script type="text/javascript" language="javascript">
function meizz(e) {
$.ajax({
//async:false, //设置ajax的同步
type: "get", //get方式
url: "../handler/QueryQuestionnaire.ashx",
//返回数据成功，将返回的json数据解析，显示在课程信息列表中
success: function (strJson) {
//检查后台返回的数据
var dataArray = eval(strJson);
e.href = dataArray[0].Questionnaire;//要访问的网址
},
//返回数据失败，弹出错误显示
error: function (XmlHttpRequest, textStatus, errorThrown) {
alert(XmlHttpRequest.responseText);
}
});
}
</script>

现象是 e.href如果放在函数的$.ajax之上可以运行，但是放到ajax里面绑定动态返回的地址，就不能运行了。经过了郁闷，最终找到了答案：因为ajax默认调用是异步的，所以不等ajax调用处理回调函数为href赋值，就直接发起了href,在这里这时候href是空值。

解决方法：将ajax调用方法改为同步，声明ajax调用方式为同步：


代码如下:

$.ajax({
async:false, //设置ajax的同步
}

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

赞 (0)

相关推荐

  • ajax如何实现页面局部跳转与结果返回

    通过代码示例分析给大家介绍ajax实现页面局部跳转与结果返回,具体内容如下: 1.带有结果返回的提交过程 这里用一个提交按钮来演示,HTML代码为: <input type="button" class="btn" value="提报" name="submit4" onClick="tibao();"> 点击提报按钮后,通过ajax来实现跳转到action中处理,JavaScript代码为:

  • AJAX跳转路径代码

    当ajax返回的时候,就是 复制代码 代码如下: sucess:function(){ if(成功){ window.location.href="路径"; } }

  • ajax提交session超时跳转页面使用全局的方法来处理

    在过滤器中写入如下方法: 复制代码 代码如下: public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletRequest httprequest = (HttpServletRequest) request; HttpServletResponse httpresponse =

  • ajax动态为a标签href赋值不执行跳转的原因分析及解决

    ajax动态为a标签href赋值不执行跳转的原因分析及解决

    由于一中考评系统要加入一个新的功能"调查问卷",我想沿用别人做好的调查问卷,用别人的有一个好处就是:人家做的专业,界面美化等非常人性化,但是它需要你每次设置完调查问卷后发布一下网址,客户端访问的每次都是变动的地址. 客户端每次点击"调查问卷",就会跳转到相应页面:  点击"调查问卷"即进入调查问卷页面:  我使用a 标签,每次访问管理员提交的"调查问卷" 复制代码 代码如下: <li><a href=&quo

  • Ajax向后台传json格式的数据出现415错误的原因分析及解决方法

    Ajax向后台传json格式的数据出现415错误的原因分析及解决方法

    问题描述: ajax往后台传json格式数据报415错误,如下图所示 页面代码 function saveUser(){ var uuId = document.getElementById("uuid").value; var idCard = document.getElementById("idCard").value; alert(uuId+idCard); // var result = new Object(); // result.uuId = uuI

  • Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来分析一下失败的原因 一.失败的原因 那是因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png.文件下载等,然而ajax请求只是个"字符型"的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白

  • Ajax获取到数据放入echarts里不显示的原因分析及解决办法

    在做一个需要用到echarts地图的项目的时候,成功通过ajax获取到了后台提供的数据,并生成了想要的JSON串.但是,放到echarts option.series[0].data里,获取不到数据.在生成的地图上无法看到你从后台获取到的值.翻遍百度和必应,给出的答案五花八门,仍旧未解决问题,最后还是一个同事大牛给解决的,在此分享给大家.希望对大家有帮助,,,, 废话不多说,直接上码: $(function () { var data = []; function setOption(data)

  • 关于include标签导致js路径找不到的问题分析及解决

    关于使用jsp:include标签及<%@ include标签时要注意的事项 先回忆一下二者的区别(对于此篇文章而言,二者在用法上没有区别) jsp:include是先编译一下included.jsp文件,然后再包含(先编译,后包含) @ include是先把文件包含就来,然后统一编译(先包含,后编译) 今天下午想把Jquery集成到项目中,发现怎么样都会出问题.原因就是路径问题. 在集成时,我的思路是写一个公共JSP文件,里面包含一些常用的js文件,当然此处我用的就是Jquery插件了. 但写

  • python爬取Ajax动态加载网页过程解析

    常见的反爬机制及处理方式 1.Headers反爬虫 :Cookie.Referer.User-Agent 解决方案: 通过F12获取headers,传给requests.get()方法 2.IP限制 :网站根据IP地址访问频率进行反爬,短时间内进制IP访问 解决方案: 1.构造自己IP代理池,每次访问随机选择代理,经常更新代理池 2.购买开放代理或私密代理IP 3.降低爬取的速度 3.User-Agent限制 :类似于IP限制 解决方案: 构造自己的User-Agent池,每次访问随机选择 5.

  • jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签

    废话不多说了,直接给大家贴代码了,具体内容如下所示: // js <script type="text/javascript"> function myBtn_f() { var cnt = $('#myCnt').val(); syncAjax('myAjax.html', { 'cnt' : cnt }, function(result) { if (100 == result.statusCode) { var data = result.lst; var $d =

  • 给Ajax返回的HTML标签动态添加样式的方法

    今天在做项目时,在页面中用ajax返回了另一个页面,突然发现返回页面中的表格把页面给顶了出去,经过一番研究,终于解决了. 先准备好要返回内容的容器 <div class="container"> </div> 预定义一个样式,以便返回的内容能直接套用 比如,我们希望返回的表格不会太过分,把页面给顶开了... <style> .container table{ width:100%; } </style> 最后直接在容器中用ajax返回内容

  • ajax动态赋值echarts的实例(饼图和柱形图)

    本文以柱形图和饼形图ajax动态赋值为例 一.饼形图赋值步骤 (1)jsp页面 <!-- 引入echarts官方js --> <script src="js/echarts.js"></script> <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM 饼形图 --> <div id="first" style="width: 600px;height:400px

  • layui Ajax请求给下拉框赋值的实例

    如下所示: <!DOCTYPE html> <html> <head> <title>排课设置</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w

随机推荐