html通过一般处理程序ashx调用服务器

已于 2022-10-09 22:20:57 修改
阅读量425 收藏
点赞数
分类专栏： Asp.net 文章标签： html 服务器 前端
于 2022-10-07 22:34:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41703489/article/details/127200230
版权

1. 在JQuery框架下，发起请求的html，如下：

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div>		
			<table id="tbSubject">
			</table>
		</div>
		<script>
			$(function(){ // Jquery的页面Load事件，载入页面后执行
				stringRender(); // 对服务器进行调用，并将结果渲染进页面
			
				// 因为一般处理程序ashx入口不多，所以在请求值中设定一个mark值，mark值表明我们要请求的函数名称。参数可以设定在请求值中，也可以在之前的aspx调用中，保存在Session会话中。
				function getServerReturn(){
					subjects = [];
					$.ajaxSettings.async = false; // 关闭异步，否则返回结果的渲染必须写进回调函数中。关闭异步，同步等待回调结束。
					$.post("/Controller/ServerReturn.ashx",{mark: "getReturn"}, function(res){
						// 此处为调用服务器后的，返回函数，参数res是返回的结果
						subjects = $.parseJSON(res); // 将JSON字符串解析为对象
						console.log(res);
					});
					
					return subjects; // 因为关闭异步，所以会等待回调后再返回
				}

				function stringRender(){
					var subjects  = getServerReturn();
					for(var i = 0; i < subjects.length; i++){
						var subject = subjects[i];
						// 将获取的值绑定到标签里面去
						// Lable包裹input，  这样选中字，就能选中单选框
						var item = '
							<tr>
								<td>
									<p>${i+1}.${subject.Stem}</p>
									${subject.Image != null ? '<img src="${subject.Image}" alt="配图" />' : ''}
									<p>
										<lable> 
											<input type="radio" name="${subject.Id}" value="A" /> A.${subject.OptionA}
										</lable>
									</p>
									
									<p>
										<lable> //这样选中字，就能选中单选框
											<input type="radio" name="${subject.Id}" value="B" /> B.${subject.OptionB}
										</lable>
									</p>
									
									<p>
										<lable> //这样选中字，就能选中单选框
											<input type="radio" name="${subject.Id}" value="C" /> C.${subject.OptionC}
										</lable>
									</p>
									
									<p>
										<lable> //这样选中字，就能选中单选框
											<input type="radio" name="${subject.Id}" value="D" /> D.${subject.OptionD}
										</lable>
									</p>						
								</td>
							</tr>
						';
						
						$("#tbSubject").append(item); // 找到表格标签，将要渲染的标签插入进去
					}
				}	
			})
		</script>
	</body>
</html>

2. 服务器端的ServerReturn.ashx，如下：

// 在一般处理程序ashx中获取Session会话，必须继承IRequiresSessionStata接口
public class ServerReturn : IHttpHandler, IRequiresSessionStata
{
	public void ProcessRequest(HttpContext context)
	{
		context.Response.ContentType = "text/plain";
		var mark = content.Request["mark"];
		if(mark == "getReturn") // 根据mark标记判断请求的是哪个方法
		{
			// 此处假设apsx页面在前面已经保存一个会话id，此处读取id值调用服务器结果
			string id = context.Session["id"].ToString();
			var res = new ServerBLL().getServe(id); // 假设id值调用到服务器结果了
			JavaScriptSeriallizer json = new JavaScriptSeriallizer(); // 调用API将结果进行JSON序列化
			context.Response.Write(json.Serialize(res)); // 将结果返回到客户端
		}

		if(mark = "getExamInfo"){
			var examId = Convert.ToInt32(context.Session["eid"]);
			var totalTime = new ExaminationsBLL().ListById(examId).First().ExaminationDuration.ToString();
			context.Response.Write(totalTime);
		}
	}

	public bool IsReusable
	{
		get{
			return false;
		}
	}
}

3. 不采用JQuery框架，JsRender框架下，发起请求的html，如下：

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	<body>
		<div>		
			<table id="tbSubject">
			</table>
		</div>
		<script id="subjectTalbeJr" type="text/x-jsrender">
			<tr>		
				<td>
					<p>{{:#index+1}}.{{:Stem}}</p> // :#index是JsRender绑定的序号关键字；:stem是对象属性
					<p>
						<if :Image != null>
							<img src="{{:Image}}" alt="这是配图" />
						</if>
					</p>
					<p>
						<lable> 
							<input type="radio" name="{{:Id}}" value="A" /> A.{{:OptionA}}
						</lable>
					</p>
					
					<p>
						<lable> //这样选中字，就能选中单选框
							<input type="radio" name="{{:Id}}" value="B" /> B.{{:OptionB}}
						</lable>
					</p>
					
					<p>
						<lable> //这样选中字，就能选中单选框
							<input type="radio" name="{{:Id}}" value="C" /> C.{{:OptionC}}
						</lable>
					</p>
					
					<p>
						<lable> //这样选中字，就能选中单选框
							<input type="radio" name="{{:Id}}" value="D" /> D.{{:OptionD}}
						</lable>
					</p>						
				</td>
			</tr>
		</script>
		<script>
			$(function(){ // Jquery的页面Load事件，载入页面后执行
				jsRendering(); // 对服务器进行调用，并将结果渲染进页面
			
				// 因为一般处理程序ashx入口不多，所以在请求值中设定一个mark值，mark值表明我们要请求的函数名称。参数可以设定在请求值中，也可以在之前的aspx调用中，保存在Session会话中。
				function getServerReturn(){
					subjects = [];
					$.ajaxSettings.async = false; // 关闭异步，否则返回结果的渲染必须写进回调函数中。关闭异步，同步等待回调结束。
					$.post("/Controller/ServerReturn.ashx",{mark: "getReturn"}, function(res){
						// 此处为调用服务器后的，返回函数，参数res是返回的结果
						subjects = $.parseJSON(res); // 将JSON字符串解析为对象
						console.log(res);
					});
					
					return subjects; // 因为关闭异步，所以会等待回调后再返回
				}
				
				function jsRendering(){
					var subject = getServerReturn();
					var resHtml = $("#subjectTalbeJr").render(subjects);
					$("#tbSubject").append(resHtml);
				}	
			})
		</script>
	</body>
</html>
嘉州子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ashx 接口调用_[ASP.Net ]利用ashx搭建简易接口
weixin_39805255的博客
12-18 1537
转载：https://blog.csdn.net/ZYD45/article/details/79939475创建接口的方式有很多，像是Web api,nodejs等等今天，主要介绍，利用ashx的方式，来搭建一个简易的api首先，利用VS编辑器，创建一个空的web应用程序生成的项目文件为此程序，添加一个新项，选择“一般处理程序”，可以看到文件后缀为.ashx若是生成后，重命名，不仅只改文件的名字...
ashx 接口调用_使用ajax去请求调用ashx的接口
weixin_39731107的博客
12-18 747
首先要明白这个是前台去请求后台的接口，把前台的参数传给后台，然后后台给前台一个或多个返回结果。1.后台的代码如下：/// /// GetInfomationDetail 的摘要说明/// public class GetInfomationDetail : IHttpHandler{public void ProcessRequest(HttpContext context){DB_Infomat...
Ajax 技术详解
tooytoos的博客
01-08 429
ajax技术的使用，与在jquery中使用ajax。
ashx接收html表单数据,ASP.NET ashx获取Url参数, 获取表单提交参数, 获取Get参数, 获取Post参数...
weixin_39621427的博客
06-05 717
ASP.NET ashx获取Url参数, 获取表单提交参数, 获取Get参数, 获取Post参数Login.ashx页面中实现using System.Web;namespace WebApplication5{/// /// Login.ashx/// public class Login : IHttpHandler{public void ProcessRequest(HttpContext...
轻量级网页数据传递
OuErHuiLaiKanKan的博客
06-04 591
首先应该写一个导航页面，它向你的ashx文件提交数据。可以创建一个aspx，名叫TestPostFile.aspx，如下      EnableViewState="false" ClientIDMode="Static" %>                        :
透过ashx看浏览器服务器运行本质(图解)
10-27
- `.ashx`：一般处理程序，通常用于实现轻量级、特定功能的服务，例如API调用、文件下载等。不需要大量HTML渲染时使用。 - `.aspx`：WebForm，是ASP.NET中创建网页的核心文件，配合.aspx.cs文件用于编写后台代码，...
jQuery dialog 异步调用ashx,webservice数据的代码
10-28
在本文中，我们将探讨如何使用jQuery dialog与异步调用技术来从ASHX处理程序（Generic Handler）和Web服务（WebService）获取数据。jQuery dialog是一个非常实用的UI组件，它可以创建模态或非模态对话框，用于显示...
一般处理程序+ajax
08-21
在上面的例子中，`handler.ashx`是一般处理程序的URL，`success`回调函数会在服务器返回数据且请求成功时被调用，`error`回调则处理任何请求失败的情况。 在后台，一般处理程序接收到请求后，可以处理业务逻辑，...
Ajax+HTML+ASHX实现文件异步上传
12-20
在这种文件上传场景下，ASHX处理程序接收由Ajax发送的文件数据，并在服务器端进行处理，如保存到硬盘、数据库或其他存储介质。 实现步骤如下： 1. **创建HTML界面**：在`index.html`中，创建一个包含文件输入控件...
【ASP.NET编程知识】透过ashx看浏览器服务器运行本质(图解).docx
05-21
本文将深入探讨这一过程，特别关注ASP.NET中的一般处理程序（ASHX）的使用。 首先，ASP.NET提供三种主要的编程模型：Web Forms（ASPx）、MVC（Model, View, Controller）和Web API。其中，Web Forms使用.aspx文件...
html ashx ajax,HTML C# ajax结合ashx处理程序实现文件上传(示例代码)
weixin_31304499的博客
06-19 159
ajax结合ashx处理程序实现文件上传一、ajaxFileUpload是一个异步上传文件的jQuery插件。ajaxFileUpload参数说明：(copy了别人的参数说明)1、url　　　　　　　　　　 上传处理程序地址。2，fileElementId　　　　　 需要上传的文件域的ID，即的ID。3，secureuri　　　　　　　 是否启用安全提交，默认为false。4，dataType...
html 和 ashx的通信 很简单的操作
速冻的博客
12-06 297
ajax提交form表单调用ashx
最新发布
10-01
当使用Ajax提交form表单调用ashx时，需要先监听表单的提交事件，并阻止表单的默认提交行为。使用jQuery时，可以通过以下代码实现：...这样，通过ajax提交form表单调用ashx就可以实现无刷新提交，并在服务端处理数据了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值