利用jQuery与.ashx完成简单的Ajax
在ASP.NET同样可以与其它编程语言一样,利用前台的Ajax技术,只是需要注意的是,后台的处理程序不再是一个aspx页面中的Page_Load,而且ASP.NET独有的“一般处理程序”.ashx,下面用一个简单的例子来说明这个问题。
如下图,一个简单到,完全可以用前台脚本完成的加法程序。这里只是为了说明问题。
首先,这个解决方案的文件结构如下图:
你首先要右击解决方案的方式,通过添加“现有项”的方式,将一个高版本的jQuery.js文件添加到你的解决方案,直接复制这个文件复制到解决方案的文件夹是没有用的,亲测。
之后,要添加一个“新建项”,这个新建项是一般处理程序.ashx,而不是一般的Web窗体.aspx
这里,将一般处理程序,命名为Calculate.ashx,代码如下,其展示给前台的东西是通过context.Response.Write完成的,用于将处理内容打印到前台。
这里首先用context.Request.Form从前台接受两个Post传递过来的参数。如果不为空,则将它们相加的结果打印到前台。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Ajax
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";//用于设置编码
string num1 = context.Request.Form["num1"];//如果是get方式应该用context.Request.QueryString
string num2 = context.Request.Form["num2"];
if (!(string.IsNullOrEmpty(num1) || string.IsNullOrEmpty(num2)))
{
context.Response.Write(int.Parse(num1) + int.Parse(num2));
}
}
public bool IsReusable//用于线程安全
{
get
{
return false;
}
}
}
}
之后的Default.aspx完全是前台HTML+javascript的内容,从两个文本框的获取参数,将其传到Calculate.ashx里面,再将结果打印到id为result的span节点里面。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ajax.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ajax</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<input type="text" id="num1" />+<input type="text" id="num2" /><button onclick="calculate()">=</button><span id="result"></span>
</body>
<script type="text/javascript">
function calculate() {
var num1 = $("#num1").val();
var num2 = $("#num2").val();
if (isNaN(num1) || isNaN(num2)) {
alert("你输入的不是数!");
}
else {
$.ajax({
type: 'post',
url: 'Calculate.ashx',
dataType: "html",
data: {
num1: num1,
num2: num2
},
success: function (data) {
$("#result").html(data);
},
error: function () {
alert("出错了!请稍候再试!");
}
});
}
}
</script>
</html>
可以看到ASP.NET,利用jQuery与.ashx完成简单的Ajax与其它编程语言几乎没有区别,
唯一需要的是,必须将Ajax的后台处理代码写在.ashx文件,而不是.aspx中的Page_Load方法,如果.aspx没有被访问,仅传过参数进去,是不会触发Page_Load方法的。
利用jQuery与.ashx完成简单的Ajax的更多相关文章
- 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: view plaincopy to clip ...
- 利用HTML5与jQuery技术创建一个简单的自动表单完成
来源:GBin1.com 在线演示 在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...
- 160620、利用 jQuery UI 和 Ajax 创建可定制的 Web 界面
如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚 ...
- 利用JQUERY实现多个AJAX请求等待
利用JQUERY实现多个AJAX请求等待 li {list-style-type:decimal;}.wiz-editor-body ol.wiz-list-level2 > li {list- ...
- jQuery简单的Ajax调用示例
jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...
- 利用jquery+iframe做一个ajax上传效果
以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
- 利用jquery对ajax操作,详解原理(附代码)
1. jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selecto ...
- 利用JQuery直接调用asp.net后台的简单方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod] 命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...
- 【javascript】利用jquery ajaxPrefilter防止ajax重复提交
利用jquery ajaxPrefilter中断请求 var pendingRequests = {}; $.ajaxPrefilter(function( options, originalOpti ...
随机推荐
- [转]Intellij IDEA快捷键
[常规]Ctrl+Shift + Enter:语句完成“!”:否定完成:输入表达式时按 “!”键Ctrl+E:最近的文件Ctrl+Shift+E:最近更改的文件Shift+Click:可以关闭文件Ct ...
- ik_max_word ik_smart 区别 和 单字 查询 不到问题
ik_smart:分词的时候只分一次,句子里面的每个字只会出现一次. 比如:中华人民共和国国歌 入上图,分成:中华人民共和国 国歌 2 部分.每个字都自出现了一次.(我指的每一个位置 的子. 2个国 ...
- python之numpy.power()数组元素求n次方
numpy.power(x1, x2) 数组的元素分别求n次方.x2可以是数字,也可以是数组,但是x1和x2的列数要相同. >>> x1 = range(6) >>> ...
- jmeter—PerfMon Metrics Collector(附java.io.IOException: Agent is unreachable via TCP错误解决办法)
jmeter—PerfMon Metrics Collector(附java.io.IOException: Agent is unreachable via TCP错误解决办法 转自https:// ...
- Visual Studio中设置Nuget程序包源
用vs2015,默认的程序包源是Microsoft and .NET,很多常见的开源包在里面搜索不到. 这时候就需要配置一个更开放的包源,网上搜了一下,都没人提供这个问题,所以自己动脑花了一番脑经,看 ...
- Windows系统下MySQL数据库出现Access denied for user 'root'@'localhost' (using password:YES) 错误
Windows系统下MySQL数据库出现Access denied for user 'root'@'localhost' (using password:YES) 错误,(root密码错误) 处理方 ...
- MAC上使用Enterprise Architecture,附带安装步骤及破解链接
绪论 网上找了半天这个主题也没有详细的步骤的昂,所以自己来造轮子了. 还有,百度搜EA破解版不靠谱,大搜狗更给力哦! 一.背景 穷逼只有一台存储空间不大MACAir,分给虚拟机Virtual Box的 ...
- 信号滤波模块verilog代码---UNLOCK,LOCK状态机方式
信号滤波模块verilog代码 `timescale 1ns / 1ps /////////////////////////////////////////////////////////////// ...
- ubuntu-docker入门到放弃(三)images镜像管理
docker虽然有公共的镜像管理hub,但是我们在日常的使用中,由于不同的业务场景,不同的架构,公共的镜像库不能满足需求,并且出于安全考虑,会搭建私有的docker hub镜像库来管理自己的image ...
- 导入数据库时出现ORA-01435: 用户不存在
报错信息: IMP-00003: 遇到 ORACLE 错误 1435 ORA-01435: 用户不存在 成功终止导入,但出现警告. 我的导入脚本为: imp system/*****@min file ...