jquery的flot显示前loading图的demo

来源：互联网发布：程序编程和软件开发编辑：程序博客网时间：2024/05/16 14:07
<%@ 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>
0 0