jQuery.ajax()调用asp.net后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。介意方法名不要重名
建一个WebFormAjax名aspx文件
CS
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormAjax.aspx.cs" Inherits="WebFromTest.WebFormAjax" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<title></title>
<script type="text/javascript">
$(document).ready(
function () { $("#btnClick").bind("click", function () {
$.ajax({
type: "post",
url: "WebFormAjax.aspx/ajaxTest0",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#msg").css("color", "#0000FF").html(data.d);
},
error: function (err) {
$("#msg").css("color", "#FF0000").html("access faield:" + err);
}
});
return false;
}); $("#Button1").bind("click", function () {
var add = $("#txtAddress").val();
var txtname = $("#txtName").val();
$.ajax({
type: "post",
url: "WebFormAjax.aspx/ajaxTest",
data: "{'address':'" + add + "','name':'" + txtname + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#msg1").css("color", "#0000FF").html(data.d);
},
error: function (err) {
$("#msg1").css("color", "#FF0000").html("access faield:" + err);
}
});
return false;
}); $("#Button2").bind("click", function () {
var add = $("TextBox1").val();
var name = $("TextBox2").val();
$.ajax({
type: "post",
url: "WebFormAjax.aspx/ajaxTestList",
data: "{'address':'" + add + "','name':'" + name + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#msg2").html("");
$(data.d).each(function () {
$("#msg2").append("<li>" + this + "</li>");
});
$("#msg2").css("color", "#0000ff");
},
error: function (err) {
$("#msg").css("color", "#FF0000").html("access faield:" + err);
}
});
return false;
}); $("#Button3").bind("click", function () {
var add = $("#TextBox3").val();
var txtname = $("#TextBox4").val();
$.ajax({
type: "post",
url: "WebFormAjax.aspx/SortedList",
data: "{'address':'" + add + "','name':'" + txtname + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#msg3").html(""); //这里只取部分键、值显示
$("#msg3").append("<li>" + data.d["0_key"] + "</li>");
$("#msg3").append("<li>" + data.d["1_key"] + "</li>");
$("#msg3").append("<li>" + data.d["2_key"] + "</li>");
$("#msg3").append("<li>" + data.d["_key"] + "</li>"); $("#msg3").css("color", "#0000FF");
},
error: function (err) {
$("#msg3").css("color", "#FF0000").html("access faield:" + err);
}
});
return false;
}); $("#Button4").bind("click", function () {
$.ajax({
url: "xml/XMLFile1.xml",
dataType: "xml",
success: function (xmlData) {
$("#msg4").html("");
$(xmlData).find("books>book").each(function () {
$("#msg4").append("====new book====");
$("#msg4").append("<li>name:" + $(this).find("name").text() + "</li>");
$("#msg4").append("<li>author:" + $(this).find("author").text() + "</li>");
$("#msg4").append("<li>wordCount:" + $(this).find("wordCount").text() + "</li>");
$("#msg4").append("<li>price:" + $(this).find("price").text() + "</li>");
});
$("#msg4").css("color", "#0000FF");
},
error: function (err) {
$("#msg4").css("color", "#FF0000").html("access faield:" + err);
}
});
return false;
});
//
}); </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnClick" runat="server" Text="click me" OnClick="btnClick_Click" />
<br />
<span id="msg"></span>
</div>
<!--参数-->
<div>
<asp:Button ID="Button1" runat="server" Text="click me" />
address:<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
family name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<br />
<span id="msg1"></span>
</div> <!--列表-->
<div>
<asp:Button ID="Button2" runat="server" Text="click me" />
address:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
family name:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<ul id="msg2">
</ul>
<!--SortedList列表-->
<div>
<asp:Button ID="Button3" runat="server" Text="click me" />
address:<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
family name:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<br />
<ul id="msg3">
</ul>
<!--XML列表-->
<div>
<asp:Button ID="Button4" runat="server" Text="click me" />
address:<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
family name:<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
<br />
<ul id="msg4">
</ul>
</div>
</div>
</div>
</form>
</body>
</html>
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 WebFromTest
{
public partial class WebFormAjax : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ }
[WebMethod]
public static string ajaxTest0()
{
return "Hi,Welcome to China!";
}
[WebMethod]
public static string ajaxTest(string address, string name)
{
return "Hi," + address + " " + name;
}
[WebMethod]
public static List<string> ajaxTestList(string address, string name)
{
List<string> list = new List<string>();
for (int i = ; i < ; i++)
{
list.Add("Hi:" + i.ToString());
}
list.Add("Hi:" + address + " " + name);
return list;
} [WebMethod]
public static SortedList<string, string> SortedList(string address, string name)
{
SortedList<string, string> sl = new SortedList<string, string>();
for (int i = ; i < ; i++)
{
sl.Add(i.ToString() + "_key", i.ToString() + "_value");
}
sl.Add("_key", "_value " + address + " " + name);
return sl;
}
protected void btnClick_Click(object sender, EventArgs e)
{ }
}
}
jQuery.ajax()调用asp.net后台方法的更多相关文章
- JQuery Ajax调用asp.net后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: using System.Web.Scrip ...
- jQuery.ajax()调用asp.net后台方法(非常重要)
http://www.cnblogs.com/zxhoo/archive/2011/01/30/1947752.html 用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先 ...
- .Net中jQuery.ajax()调用asp.net后台方法 总结
利用JQuery的$.ajax()调用.Net后台方法有多种方式, 不多说了 直接上代码 前台代码 <script type="text/javascript"> $ ...
- ajax 调用asp.net后台方法
ajax 调用asp.net后台方法 这种做法有好几种,如调用xx.asxh 页面,或者直接调用xx.aspx也面,在page_Load中进行一些判断然后调用后面的其他方法, 或者你可以直接调用we ...
- 利用JQuery直接调用asp.net后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod] 命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...
- jQuery调用Asp.Net后台方法
常用的ajax就不讲了,这里主要是说通过ajax调用asp.net后台的cs文件暴露的方法. 前台: <%@ Page Language="C#" AutoEventWire ...
- JQuery ajax调用asp.net的webMethod
本文章转载:http://www.cnblogs.com/zengxiangzhan/archive/2011/01/16/1936938.html 在vs2010中,用JQuery ajax调用as ...
- JQuery直接调用asp.net后台WebMethod方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.[WebMethod] 命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod]的 ...
- [ASP.NET]JQuery直接调用asp.net后台WebMethod方法
在项目开发碰到此类需求,特此记录下经项目验证的方法总结. 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod] 命名空间 1.无参数的方法调用 注意:方 ...
随机推荐
- 解决 502、504 Gateway Time-out(nginx)
一.504 Gateway Time-out问题常见于使用nginx作为web server的服务器的网站 我遇到这个问题是在升级discuz论坛的时候遇到的 一般看来, 这种情况可能是由于nginx ...
- 处理 Oracle SQL in 超过1000 的解决方案
处理oracle sql 语句in子句中(where id in (1, 2, ..., 1000, 1001)),如果子句中超过1000项就会报错.这主要是oracle考虑性能问题做的限制.如果要解 ...
- 作业三：WC项目
WC一个简单的文件检测系统 用c语言实现 不多说 上代码 #include<stdio.h> #include<stdlib.h> #include <io.h> ...
- MongoDB学习笔记五：聚合
『count』count是最简单的聚合工具,返回集合中的文档数量:> db.foo.count()0> db.foo.insert({"x" : 1})> db. ...
- IE下被遮住的iframe能接收事件
今天,2012-2-22,是个很二的日子,遇到了一个诡异的问题~~ 下午收到一封信. from:someone@ctrip.comto:小灰灰title:被挡住的iframe也能接收到点击事件小灰灰, ...
- Linux-磁盘及网络IO工作方式解析
PIO与DMA 有必要简单地说说慢速I/O设备和内存之间的数据传输方式. PIO我们拿磁盘来说,很早以前,磁盘和内存之间的数据传输是需要CPU控制的,也就是说如果我们读取磁盘文件到内存中,数据要经过C ...
- Web跨域问题总结
一.跨域问题的由来为了防止某些文档或脚本加载别的域下的未知内容造成泄露隐私,破坏系统等安全行为,1995年, Netscape 公司在浏览器中引入同源策略/SOP(Same origin policy ...
- [Linux] - Docker 常用命令
# 运行docker # -it表示前端运行 docker run -it centos /bin/echo haha # 后端运行并映射80端口 docker run -dt -p : --name ...
- [PHP] - Laravel 5 的 Hello Wold
吐槽一段 整了半天,Laravel下载麻烦得可以去死.先要安装composer,而composer又被共墙了,之后又要安装git,安装完git还要注册git,等等.... 最终放弃这种玩法,太恶心了. ...
- ife-task0003学习收获总结
+ 编写可维护的css原则是,尽量减少改动时要编辑的地方(减少代码重复). + CSS布局奇淫技巧之-高度自适应 高度自适应:通过绝对定位来解决高度自适应的问题,元素不设置高度,设置绝对定位,将top ...