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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
如何利用Python识别图片中的文字
2020/05/31 Python
python3的pip路径在哪
2020/06/23 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
通信生自我鉴定
2014/01/18 职场文书
教师申诉制度
2014/01/29 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
浅谈Python中的正则表达式
2021/06/28 Python
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技