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 相关文章推荐
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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
再说下636单管机
2021/03/02 无线电
php empty函数 使用说明
2009/08/10 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
python实现梯度下降法
2020/03/24 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
大学生简历中个人的自我评价
2013/10/06 职场文书
教师业务学习制度
2014/01/25 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
新品发布会策划方案
2014/06/08 职场文书
学校端午节活动总结
2015/02/11 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技