• html Ajax连接.NET Ashx


    Html代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		 <meta charset="utf-8">
    		  <meta name="viewport" content="width=device-width, initial-scale=1">
    		  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    		  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    		  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    		  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    		<title>Pick One</title>
    	</head> 
    	<style type="text/css">
    		span{
    			/*display:inline;*/
    			margin:0 auto
    		}	
    		.header
    		{ 
    		   background: #ccc;
    		   display: flex;
    		   justify-content: space-between; 
    		}
    		.nowtime
    		{
    			font-size:32px;
    			font-weight:bold; 
    		}
    		.tname
    		{
    			font-size:48px;
    			color:#9400D3; 
    		}
    		.endtime
    		{
    			font-size:32px;
    			color:#000F7F; 
    		} 
    	</style>
    	<script>     
    	           var Retimer=0;
    			   var rtimr=0;
    				$(document).ready(function() { 
    					getData();
    					window.setInterval(function(){ getTime() },1000); 
    				})
    				/*
    				function realSysTime(){ 
    				     	   var now=new Date(); 
    				     	   var year=now.getFullYear();
    				     	   var month=now.getMonth();
    				     	   var date=now.getDate();
    				     	   var day=now.getDay();
    				     	   var hour=now.getHours();
    				     	   var minu=now.getMinutes();
    				     	   var sec=now.getSeconds();
    				     	   if(Number(sec)<10){
    				     		   sec="0"+sec.toString();
    				     	   }
    				     	   month=month+1; 
    				     	   var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); 
    				     	   var week=arr_week[day]; 
    				     	   var time=year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minu+":"+sec; //组合系统时间  
    						   document.getElementById("time").innerHTML=time;
    				 } 
    				 */
    				 function getData(){
    					 $.ajax({
    					     url : "http://localhost:14047/witchone.ashx",//请求地址
    					     dataType : "json",//数据格式 
    					     type : "get",//请求方式
    					     async : false,//是否异步请求
    					     success : function(data) {   //如何发送成功
    					      console.log(data);
    					 	 console.log(data["Title"]);
    					 	document.getElementById("ttt1").innerHTML=data["Title"];
    					 	 
    					 	 var json = eval (data["Data"]);
    					 	 console.log(json);
    					     for(var i=0;i<json.length;i++){    //遍历data数组
    					               var row=table.insertRow(table.rows.length);
    					                      var c1=row.insertCell(0);
    					                      c1.innerHTML=json[i].ID;
    					                      var c2=row.insertCell(1);
    					                      c2.innerHTML=json[i].Name;
    					                      var c3=row.insertCell(2);
    					                      c3.innerHTML=json[i].Age;
    					         }  
    							 Retimer=data["RefreshTime"];
    							 rtimr=Retimer; 
    					     },
    					 }) 
    					}  
    				   function getTime(){ 
    						 document.getElementById("countdown").innerHTML=Retimer;
    						 Retimer=Retimer-1;
    						if(Retimer==-1)	
    						{
    							getData();
    							Retimer= rtimr;
    						}
    				        var now = new Date(); 
    						var year = now.getFullYear();      
    						var month = now.getMonth() +1;    
    						var day = now.getDate();           
    						var hh = now.getHours();           
    						var mm = now.getMinutes();         
    						var ss = now.getSeconds();    
    						var clock = year + "-";
    						
    						if(month < 10)
    							clock += "0";
    			
    						clock += month + "-";
    			
    						if(day < 10)
    							clock += "0";
    			
    						clock += day + " ";
    			
    						if(hh < 10)
    							clock += "0";
    			
    						clock += hh + ":";
    						if (mm < 10) clock += '0';
    						clock += mm + ":";
    			
    						if (ss < 10) clock += '0';
    						clock += ss; 
    				        document.getElementById("time").innerHTML=clock;
    				    } 
    	</script>
    	<body>
    		<div class="header">
    			<span class="nowtime" id='time'></span>   
    		    <span class="tname" id='ttt1'></span>
    			<span class="endtime">倒计时
    				<span class="timecountdown" id='countdown'></span>
    			</span> 
    		</div>
    		
    		<div>
    			<table id='table' class="table table-bordered">
    			    <thead>
    			      <tr>
    			        <th>ID</th> 
    					<th>Name</th> 
    					<th>Age</th> 
    			      </tr>
    			    </thead> 
    		</div> 
    	</body>
    </html>
    

      

      .net ashx

    public class witchone: IHttpHandler
        {
    
            public void ProcessRequest(HttpContext context)
            {
                Dictionary<string, object> param = new Dictionary<string, object>();
                string ret = "";
                DataTable dt = new DataTable();//创建表
                dt.Columns.Add("ID", typeof(Int32));//添加列
                dt.Columns.Add("Name", typeof(String));
                dt.Columns.Add("Age", typeof(Int32));
                dt.Rows.Add(new object[] { 1, "张三", 20 });//添加行
                dt.Rows.Add(new object[] { 2, "李四", 25 });
                dt.Rows.Add(new object[] { 3, "王五", 30 });
                string data = JsonConvert.SerializeObject(dt, new DataTableConverter());
    
                param.Add("Title", "Witch One");
                param.Add("RefreshTime", 5);
                param.Add("NowTime", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"));
                param.Add("Data", data);
                ret = JsonConvert.SerializeObject(param);   
                context.Response.AddHeader("Access-Control-Allow-Origin", "*");
                context.Response.ContentType = "text/html";
                context.Response.Write(ret);
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    

      

  • 相关阅读:
    微软VS2008月底推出beta 2中文版 搭配.NET 3.5
    Asp.Net AjaxPasswordstrength控件使用
    Asp.Net AjaxHoverMenu控件使用
    Asp.Net Ajax AutoComplete控件使用
    ASP.NET中基类页的设计和使用
    Asp.Net中页面间传值方法
    基于ASP.NET AJAX技术开发在线RSS阅读器(上篇)
    Asp.Net AjaxFilteredTextBox控件使用
    基于ASP.NET AJAX技术开发在线RSS阅读器(下篇)
    Asp.Net AjaxTextBoxWateramrk控件使用
  • 原文地址:https://www.cnblogs.com/Zingu/p/12195068.html
Copyright © 2020-2023  润新知