管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

jquery.Ajax()方法调用Asp.Net后台的方法解析

　　利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

　　先来个简单的实例热热身吧。

　　1、无参数的方法调用

　　asp.net code：

　　

复制代码 代码如下:

　　using System.Web.Script.Services;

　　[WebMethod]

　　public static string SayHello()

　　{

　　return "Hello Ajax!";

　　}

　　using System.Web.Script.Services;

　　[WebMethod]

　　public static string SayHello()

　　{

　　return "Hello Ajax!";

　　}

　　注意：1.方法一定要静态方法，而且要有[WebMethod]的声明

　　JQuery code：

　　

复制代码 代码如下:

　　/// <reference path="jquery-1.4.2-vsdoc.js"/>

　　$(function() {

　　$("#btnOK").click(function() {

　　$.ajax({

　　//要用post方式

　　type: "Post",

　　//方法所在页面和方法名

　　url: "data.aspx/SayHello",

　　contentType: "application/json; charset=utf-8",

　　dataType: "json",

　　success: function(data) {

　　//返回的数据用data.d获取内容

　　alert(data.d);

　　},

　　error: function(err) {

　　alert(err);

　　}

　　});

　　//禁用按钮的提交

　　return false;

　　});

　　});

　　/// <reference path="jquery-1.4.2-vsdoc.js"/>

　　$(function() {

　　$("#btnOK").click(function() {

　　$.ajax({

　　//要用post方式

　　type: "Post",

　　//方法所在页面和方法名

　　url: "data.aspx/SayHello",

　　contentType: "application/json; charset=utf-8",

　　dataType: "json",

　　success: function(data) {

　　//返回的数据用data.d获取内容

　　alert(data.d);

　　},

　　error: function(err) {

　　alert(err);

　　}

　　});

　　//禁用按钮的提交

　　return false;

　　});

　　});

　　结果：

　　2、带参数的方法调用

　　asp.net code：

　　

复制代码 代码如下:

　　using System.Web.Script.Services;

　　[WebMethod]

　　public static string GetStr(string str, string str2)

　　{

　　return str + str2;

　　}

　　using System.Web.Script.Services;

　　[WebMethod]

　　public static string GetStr(string str, string str2)

　　{

　　return str + str2;

　　}

　　JQuery code：

　　

复制代码 代码如下:

　　/// <reference path="jquery-1.4.2-vsdoc.js"/>

　　$(function() {

　　$("#btnOK").click(function() {

　　$.ajax({

　　type: "Post",

　　url: "data.aspx/GetStr",

　　//方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字

　　data: "{'str':'我是','str2':'XXX'}",

　　contentType: "application/json; charset=utf-8",

　　dataType: "json",

　　success: function(data) {

　　//返回的数据用data.d获取内容

　　alert(data.d);

　　},

　　error: function(err) {

　　alert(err);

　　}

　　});

　　//禁用按钮的提交

　　return false;

　　});

　　});

　　/// <reference path="jquery-1.4.2-vsdoc.js"/>

　　$(function() {

　　$("#btnOK").click(function() {

　　$.ajax({

　　type: "Post",

　　url: "data.aspx/GetStr",

　　//方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字

　　data: "{'str':'我是','str2':'XXX'}",

　　contentType: "application/json; charset=utf-8",

　　dataType: "json",

　　success: function(data) {

　　//返回的数据用data.d获取内容

　　alert(data.d);

　　},

　　error: function(err) {

　　alert(err);

　　}

　　});

　　//禁用按钮的提交

　　return false;

　　});

　　});

　　运行结果：

　　下面进入高级应用罗

　　3、返回数组方法的调用

　　asp.net code：

　　

复制代码 代码如下:

　　using System.Web.Script.Services;

　　[WebMethod]

　　public static List<string> GetArray()

　　{

　　List<string> li = new List<string>();

　　for (int i = 0; i < 10; i++)

　　li.Add(i + "");

　　return li;

　　}

　　using System.Web.Script.Services;

　　[WebMethod]

　　public static List<string> GetArray()

　　{

　　List<string> li = new List<string>();

　　for (int i = 0; i < 10; i++)

　　li.Add(i + "");

　　return li;

　　}

　　JQuery code：

　　

复制代码 代码如下:

　　/// <reference path="jquery-1.4.2-vsdoc.js"/>

　　$(function() {

　　$("#btnOK").click(function() {

　　$.ajax({

　　type: "Post",

　　url: "data.aspx/GetArray",

　　contentType: "application/json; charset=utf-8",

　　dataType: "json",

　　success: function(data) {

　　//插入前先清空ul

　　$("#list").html("");

　　//递归获取数据

　　$(data.d).each(function() {

　　//插入结果到li里面

　　$("#list").append("<li>" + this + "</li>");

　　});

　　alert(data.d);

　　},

　　error: function(err) {

　　alert(err);

　　}

　　});

　　//禁用按钮的提交

　　return false;

　　});

　　});

　　/// <reference path="jquery-1.4.2-vsdoc.js"/>

　　$(function() {

　　$("#btnOK").click(function() {

　　$.ajax({

　　type: "Post",

　　url: "data.aspx/GetArray",

　　contentType: "application/json; charset=utf-8",

　　dataType: "json",

　　success: function(data) {

　　//插入前先清空ul

　　$("#list").html("");

　　//递归获取数据

　　$(data.d).each(function() {

　　//插入结果到li里面

　　$("#list").append("<li>" + this + "</li>");

　　});

　　alert(data.d);

　　},

　　error: function(err) {

　　alert(err);

　　}

　　});

　　//禁用按钮的提交

　　return false;

　　});

　　});

　　运行结果：

　　4、返回Hashtable方法的调用

　　asp.net code：

　　

复制代码 代码如下:

　　using System.Web.Script.Services;

　　using System.Collections;

　　[WebMethod]

　　public static Hashtable GetHash(string key,string value)

　　{

　　Hashtable hs = new Hashtable();

　　hs.Add("www", "yahooooooo");

　　hs.Add(key, value);

　　return hs;

　　}

　　using System.Web.Script.Services;

　　using System.Collections;

　　[WebMethod]

　　public static Hashtable GetHash(string key,string value)

　　{

　　Hashtable hs = new Hashtable();

　　hs.Add("www", "yahooooooo");

　　hs.Add(key, value);

　　return hs;

　　}

　　JQuery code：

　　

复制代码 代码如下:

　　/// <reference path="jquery-1.4.2-vsdoc.js"/>

　　$(function() {

　　$("#btnOK").click(function() {

　　$.ajax({

　　type: "Post",

　　url: "data.aspx/GetHash",

　　//记得加双引号  T_T

　　data: "{ 'key': 'haha', 'value': '哈哈！' }",

　　contentType: "application/json; charset=utf-8",

　　dataType: "json",

　　success: function(data) {

　　alert("key: haha ==> "+data.d["haha"]+"\n key: www ==> "+data.d["www"]);

　　},

　　error: function(err) {

　　alert(err + "err");

　　}

　　});

　　//禁用按钮的提交

　　return false;

　　});

　　});

　　/// <reference path="jquery-1.4.2-vsdoc.js"/>

　　$(function() {

　　$("#btnOK").click(function() {

　　$.ajax({

　　type: "Post",

　　url: "data.aspx/GetHash",

　　//记得加双引号  T_T

　　data: "{ 'key': 'haha', 'value': '哈哈！' }",

　　contentType: "application/json; charset=utf-8",

　　dataType: "json",

　　success: function(data) {

　　alert("key: haha ==> "+data.d["haha"]+"\n key: www ==> "+data.d["www"]);

　　},

　　error: function(err) {

　　alert(err + "err");

　　}

　　});

　　//禁用按钮的提交

　　return false;

　　});

　　});

　　运行结果：

　　5、操作xml

　　XMLtest.xml:

　　

复制代码 代码如下:

　　<?xml version="1.0" encoding="utf-8" ?>

　　<data>

　　<item>

　　<id>1</id>

　　<name>qwe</name>

　　</item>

　　<item>

　　<id>2</id>

　　<name>asd</name>

　　</item>

　　</data>

　　<?xml version="1.0" encoding="utf-8" ?>

　　<data>

　　<item>

　　<id>1</id>

　　<name>qwe</name>

　　</item>

　　<item>

　　<id>2</id>

　　<name>asd</name>

　　</item>

　　</data>

　　JQuery code:

　　

复制代码 代码如下:

　　$(function() {

　　$("#btnOK").click(function() {

　　$.ajax({

　　url: "XMLtest.xml",

　　dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了

　　success: function(xml) {

　　//清空list

　　$("#list").html("");

　　//查找xml元素   KVM 网上购物 毛刷 网站建设 北京快递公司 超声波焊接机

　　$(xml).find("data>item").each(function() {

　　$("#list").append("<li>id:" + $(this).find("id").text() +"</li>");

　　$("#list").append("<li>Name:"+ $(this).find("name").text() + "</li>");

　　})

　　},

　　error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数

　　alert(status);

　　}

　　});

　　//禁用按钮的提交

　　return false;

　　});

　　});

　　$(function() {

　　$("#btnOK").click(function() {

　　$.ajax({

　　url: "XMLtest.xml",

　　dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了

　　success: function(xml) {

　　//清空list

　　$("#list").html("");

　　//查找xml元素

　　$(xml).find("data>item").each(function() {

　　$("#list").append("<li>id:" + $(this).find("id").text() +"</li>");

　　$("#list").append("<li>Name:"+ $(this).find("name").text() + "</li>");

　　})

　　},

　　error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数

　　alert(status);

　　}

　　});

　　//禁用按钮的提交

　　return false;

　　});

　　});

教程首页 更多教程