首页 >web前端 >js教程 > 正文

实现jquery在启动页面立刻加载数据

原创2018-03-15 10:03:3201177
这次给大家带来实现jquery在启动页面立刻加载数据,实现jquery在启动页面立刻加载数据的注意事项有哪些,下面就是实战案例,一起来看一下。

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

$(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中:

<p class="tab-pane active" id="A" style="text-align:center;">
   <p 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>
    </p>
 </p>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

实现输入框与下拉框联动效果

用jquery操作输入框的文本内容

以上就是实现jquery在启动页面立刻加载数据的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:jquery 立刻 页面
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • javascript初级视频教程javascript初级视频教程
  • jquery 基础视频教程jquery 基础视频教程
  • 视频教程分类