<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: AJAX</title>
<link href="../css/examples.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="../js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../js/jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
var json={
//传需要传给后台的值
username:"username",
psw:"password"
}
$.ajax({
type:"post",
url:"../ajaxServlet",
data:json,
//loading图显示
beforeSend:function(){
$("#bdiv").addClass("mig");
alert("....");
},
//以下data是后台回传给前台的json数据
success:function(data,tesxtStatus){
var mdata=eval("("+data+")");
$("#bdiv").removeClass("mig");
var d1=mdata[0].d1;
var d2=mdata[1].d1;
$.plot("#placeholder",
[{label:"One",data:d1} ,{label:"Two",data:d2}]
);
}
});
});
</script>
<style type="text/css">
.mig
{
background:url(2.gif) center no-repeat;
color:#FF0000
}
</style>
</head>
<body>
<div id="content">
<div class="demo-container" id="bdiv" >
<div id="placeholder" class="demo-placeholder"></div>
</div>
</body>
</html>
jquery的flot显示前loading图的demo
最新推荐文章于 2021-09-09 11:49:23 发布