jquery异步调用页面后台方法‏(asp.net)


Posted in Javascript onMarch 01, 2011
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryCSMethodForm.aspx.cs" Inherits="JQuerWeb.JqueryCSMethodForm" %> 
<!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 runat="server"> 
<title></title> 
<script type="text/javascript" src="JS/jquery-1.4.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("input[type='button'][value='GetDate']").click(function() { 
$.ajax({ 
type: "post", 
url: "JqueryCSMethodForm.aspx/GetNowDate", 
datatype: "json", 
contentType: "application/json; charset=utf-8", 
success: function(data) { 
$("input#showTime").val(eval('(' + data.d + ')')[0].nowtime); 
}, 
error: function(XMLHttpRequest, textStatus, errorThrown) { 
alert(errorThrown); 
} 
}); 
}); 
$("input[type='button'][value='GetOneDayLater']").click(function() { 
$.ajax({ 
type: "post", 
url: "JqueryCSMethodForm.aspx/GetOneDayLate", 
data:"{days:1}", 
datatype: "json", 
contentType: "application/json; charset=utf-8", 
success: function(data) { 
$("input#showTime").val(eval('(' + data.d + ')')[0].nowtime); 
}, 
error: function(XMLHttpRequest, textStatus, errorThrown) { 
alert(errorThrown); 
} 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="button" value="GetDate" /> 
<input type=button value="GetOneDayLater" /> 
<input type="text" id="showTime" /> 
</div> 
</form> 
</body> 
</html>

CS代码:
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.Services; 
namespace JQuerWeb 
{ 
public partial class JqueryCSMethodForm : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
} 
[WebMethod] 
public static String GetNowDate() 
{ 
return "[{\"nowtime\":\"" + DateTime.Now.ToShortDateString() + "\"}]"; 
} 
[WebMethod] 
public static String GetOneDayLate(Int32 days) 
{ 
return "[{\"nowtime\":\"" + DateTime.Now.AddDays(days).ToShortDateString() + "\"}]"; 
} 
} 
}

注意点:
(1) url的填写格式 url+"/method name"
(2) contentType: "application/json; charset=utf-8", 这个必须要有
(3) 返回数据的类型为json
(4) data:"{days:1}",参数的传递
(5) 后台的方法必须是public static 而且还要有 [WebMethod]特性修饰
Javascript 相关文章推荐
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
xml转json的js代码
Aug 28 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 #Javascript
jquery一句话全选/取消全选
Mar 01 #Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 #Javascript
jquery中实现标签切换效果的代码
Mar 01 #Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 #Javascript
收集的10个免费的jQuery相册
Feb 26 #Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 #Javascript
You might like
PHP 截取字符串专题集合
2010/08/19 PHP
浅析PHP Socket技术
2013/08/02 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
python属于跨平台语言码
2020/06/09 Python
python openCV自制绘画板
2020/10/27 Python
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
工商管理专业职业生涯规划
2014/01/01 职场文书
大家检讨书5000字
2014/02/03 职场文书
合伙经营协议书范本
2014/04/18 职场文书
股票投资建议书
2014/05/19 职场文书
社区班子对照检查材料
2014/08/27 职场文书
技术股东合作协议书
2014/12/02 职场文书
小学运动会宣传稿
2015/07/23 职场文书
高三数学教学反思
2016/02/18 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python