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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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中$this-&amp;gt;含义分析
2009/11/29 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
简单谈谈React中的路由系统
2017/07/25 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
Python实现基于HTTP文件传输实例
2014/11/08 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python使用folium库绘制地图点击框
2018/09/21 Python
kafka-python批量发送数据的实例
2018/12/27 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
高中考试作弊检讨书
2014/01/14 职场文书
心理健康教育主题班会
2015/08/13 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
Python基础之进程详解
2021/05/21 Python
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript