jquery在启动页面时,自动加载数据的实例


Posted in jQuery onJanuary 22, 2018

其实,重要的就是这个方法:

$(document).ready(function(){ 
}

具体的在jquery中:

具体的ajax怎么使用,可以查看我的上一篇博客《浅谈ajax在jquery中的请求和servlet中的响应》

<script type="text/javascript">
 $(document).ready(function(){
		var str = "";
		var strA = "";
  $.ajax({
 		type: "GET",
 	 url: "<%=path%>" + "/queryOrder.do",
 	 dataType: "json",
 	 async:false,
 	 data:{
 	 	 
 	 	 },
 	 success: function(data){
 	 	for (var i in data)
 	 	{
 	 		var num = parseInt(i) + 1;
 	 		var status = data[i]['status'];
 	 		if( status == 0 || status == -4){
 	 		strA = '<a class="m1" value="'+ data[i]['orderId'] +'">未处理</a>';
 	 		}else if( status == -1 || status == -2){
 	 		strA = '<a class="m2" value="'+ data[i]['orderId'] +'">已接受</a>';
 	 		}else if( status == -3){
 	 		strA = '<a class="m3" value="'+ data[i]['orderId'] +'">已完成</a>';
 	 		}
 	 		str +="<tr><td>" + num + "</td><td>" 
 	 			+ data[i]['ownerName'] + "</td><td>"
 	 			 + data[i]['telephone'] + "</td><td>" 
 	 			+ data[i]['hopeTimeName'] + "</td><td>" 
 	 			+ data[i]['build'] + "</td><td>"
 	 			+ data[i]['description'] + "</td><td>"
 	 			+ strA + "</td>";
 	 			+ "</tr>";
 	 	}
 	 		$(".tabletr").after(str);
 	 },
 	 error: function(data){
 	 	
 	 }
 		}) 	
 	});
</script>

在jsp中:

<div class="tab-pane active" id="A" style="text-align:center;">
   <div class="row marg" >
    <h3>维修单</h3>
    <table border="2 " style="width:100%;text-align:center;">
     <tr class="tabletr">
     	<th>序号</th>
     <th>业主名</th>
     <th>联系方式</th>
     <th>时间</th>
     <th>地址</th>
     <th>项目描述</th>
     <th>状态</th>
     </tr>
    </table>
    </div>
 </div>

以上这篇jquery在启动页面时,自动加载数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 #jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 #jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 #jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 #jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 #jQuery
基于jquery的on和click的区别详解
Jan 15 #jQuery
vue-cli webpack 引入jquery的方法
Jan 10 #jQuery
You might like
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
python 弧度与角度互转实例
2020/04/15 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
2015小学教育教学工作总结
2015/07/21 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
详解OpenCV曝光融合
2022/04/29 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android