Jquery ajax加载等待执行结束再继续执行下面代码操作


Posted in Javascript onNovember 24, 2015

Jquery等待ajax执行完毕再继续执行下面代码的效果,具体代码如下,其实就是将 jquery ajax 函数的 async 参数设置为 false 即可,该参数默认为 true:

$(document).ready(function(){ 
  loadphpernote(); 
  window.open('http://www.phpernote.com'); 
}); 
function loadphpernote(){ 
  var url='http://www.phpernote.com/ajax.php'; 
  var data='action=list'; 
  jQuery.ajax({ 
    type:'post', 
    url:url, 
    data:para, 
    async:false,//false代表只有在等待ajax执行完毕后才执行window.open('http://www.phpernote.com')语句 
    success:function (msg){ 
      $('#articleList').html(msg); 
    } 
  }); 
}

  下面给大家介绍jquery 加载等待效果

var dates = this.options.form.getWidgetByName("dates").getValue(); 
 $.ajax({  
  url: "http://127.0.0.1:9009/Brilliantzz/service/snproduct.do",  
  data:dates, 
beforeSend:function() { 
   var h = document.body.clientHeight;  
 $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:h}).appendTo("body");  
 $("<div class=\"datagrid-mask-msg\"></div>").html("正在上传生产数据,请稍候。。。").appendTo("body").css({display:"block", 
 left:($(document.body).outerWidth(true) - 190) / 2, 
 top:(h - 45) / 2}); 
  }, 
complete:function(data) { 
     $('.datagrid-mask-msg').remove(); 
  $('.datagrid-mask').remove(); 
  }, 
  success: function(data) { 
    alert("生产数据:"+data);   
  }, 
  error: function(data) { 
       alert("上传生产数据异常!"); 
      } 
    });
Javascript 相关文章推荐
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 #Javascript
javascript实现加载xml文件的方法
Nov 24 #Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 #Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 #Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 #Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 #Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 #Javascript
You might like
PHP与javascript的两种交互方式
2006/10/09 PHP
PHP读取MySQL数据代码
2008/06/05 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
Django自带的用户验证系统实现
2020/12/18 Python
python pillow库的基础使用教程
2021/01/13 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
好的演讲稿开场白
2013/12/30 职场文书
安全大检查实施方案
2014/02/22 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
航空学院求职信
2014/06/11 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript