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;

            }

        }

    }

html Ajax连接.NET Ashx的更多相关文章

ajax连接池和XMLHttpRequest
连接池我们公司在路由和交换机web界面和后端交互全部采用的是自己封装的ajax组件完成的,组件有点老了,代码风格和其中的某些用法现在看起来都有点不习惯.今天把这个组件的核心部分的ajax连接池记录下 ...
js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步（open的post方式send函数带参数）（post请求和get请求区别：get：快、简单 post：安全，量大，不缓存）（服务器同步和异步区别：同步：等待服务器响应当中浏览器不能做别的事情）（ajax和jquery一起用的）
js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...
对Ajax连接的认识~为毛不能上传文件！！！
最近做毕设的时候需要用到上传图片的功能,但是我的毕设全部的传输都是基于ajax的请求,百度了一圈发现TMD居然说ajax不能上传文件!!当时我就不乐意了啊,那难道其他人都用的是黑科技吗?!又来网上的大 ...
Hbuilder用ajax连接阿里服务器上的servlet以及注意事项
Hbuiler连接服务器上的servlet的步骤与连接本地项目中的servlet基本一致,详细内容参考上一片博客:https://www.cnblogs.com/ljysy/p/10294640.ht ...
Hbuilder用ajax连接eclipse中的servlet例子以及注意事项
今天用前端神器Hbuilder连接eclipse中的servlet,真是费了九牛二虎之力,才把问题解决 Hbuilder中的代码: test.html <!DOCTYPE html> &l ...
ajax连接服务器框架
ajax.js function ajax(url, fnSucc, fnFaild) { //1.创建Ajax对象 if(window.XMLHttpRequest) { var oAjax=new ...
如何用 ajax 连接mysql数据库，并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。
开讲前,先说下网上,大部分的关于这方面的博文或者其他什么的,就我自己的感觉,第一说得不详细,第二语言不能很好的被初学者了解. 我这篇博文的标题之所以用了三句,是为了方便其他人好查找: 这里介绍的方法有 ...
两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）
一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术一.创建数据库这里以 ...
项目中Ajax调用ashx页面中的Function的实战
前台页面: 使用几个display=none的空间存储DropdownList中的值,点击Search Button后刷新页面再次给DropdownList赋值使用 <%@ Page Langu ...

随机推荐

hdoj 5971
Wrestling Match Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)T ...
JSON简单理解
JSON 与 JS 对象的关系很多人搞不清楚 JSON 和 Js 对象的关系,甚至连谁是谁都不清楚.其实,可以这么理解: JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息 ...
MDK5生成BIn文件的方法
配置MDK5 生成bin文件的第一步:方法打开option for Target 第二步:选择 user 第三步:找到After Build/Rebuild 第四步:勾选run,点击文件选择小图标选 ...
英语能力考试 All In One
英语能力考试 All In One 托福,雅思,托业 TOEIC 托业考试 Test of English for International Communication (TOEIC) 国际交流英语 ...
SVG image tag
SVG image tag https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag <?xml versi ...
GitHub Sponsors
GitHub Sponsors https://github.com/sponsors https://github.com/sponsors/xgqfrms?preview=true https:/ ...
IndexedDB All In One
IndexedDB All In One https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API https://develope ...
js form.onformData事件
在表单提交前修改数据,此事件在submit之后 f1.addEventListener("formdata", (e) => { e.formData.append(&quo ...
svg all in one
svg all in one show svg in html methods https://vecta.io/blog/best-way-to-embed-svg https://css-tric ...
CSS 阴影效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

html Ajax连接.NET Ashx

html Ajax连接.NET Ashx的更多相关文章

随机推荐

热门专题