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

[WebMethod]   命名空间

1、无参数的方法调用, 注意：1.方法一定要静态方法，而且要有[WebMethod]的声明

后台<C#>:

1
2
3
4
5
6
7
using System.Web.Script.Services;  
 
[WebMethod]  
public static string SayHello()  
{  
     return "Hello Ajax!";  
}

前台<JQuery>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(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、带参数的方法调用

后台<C#>:

1
2
3
4
5
6
7
using System.Web.Script.Services;
 
[WebMethod]
public static string GetStr(string str, string str2)
{
    return str + str2;
}

前台<JQuery>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(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、返回数组方法的调用

后台<C#>:

1
2
3
4
5
6
7
8
9
10
11
12
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>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
$(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方法的调用

后台<C#>:

1
2
3
4
5
6
7
8
9
10
11
12
13
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>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
XMLtest.xml:
 
view plaincopy to clipboardprint?
<?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>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(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;  
    });  
});

类型：Jquery；问题：jquery调用后台带参数方法；结果：利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。的更多相关文章

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

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: view plaincopy to clip ...

  2. C# 调用Mysql 带参数存储过程

    使用C#调用Mysql 带参数的存储过程: 1.创建带参数的存储过程:USP_Temp_Test 2.两个参数:IN 参数为 P_XML , OUT 参数为 P_ErrorOut 3.C#代码调用该存 ...

  3. c#调用Mysql带参数的存储过程

    1.首先创建一个带参数的存储过程 ①存储过程名称=proc_bookinfo  ②存储过程2个参数 一个in 一个out in参数名称=ispay out参数名称=unPaycount ③ 这个存储过 ...

  4. 25．按要求编写一个Java应用程序： （1）编写一个矩形类Rect，包含： 两个属性：矩形的宽width；矩形的高height。 两个构造方法： 1．一个带有两个参数的构造方法，用于将width和height属性初化； 2．一个不带参数的构造方法，将矩形初始化为宽和高都为10。 两个方法： 求矩形面积的方法area() 求矩形周长的方法perimeter() （2）通过继承Rect类编写一个具有

    package zhongqiuzuoye; //自己写的方法 public class Rect { public double width; public double height; Rect( ...

  5. jQuery获取URL中所带参数的办法

    可以使用正则表达式进行结果的拆分: http://www.cnblogs.com/babycool/p/3169058.html 可以直接进行所需内容的split: http://blog.scien ...

  6. Lua调用C++带参数的方法

    C++代码: // LuaAndC.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #i ...

  7. 按要求编写一个Java应用程序： （1）编写一个矩形类Rect，包含： 两个属性：矩形的宽width；矩形的高height。 两个构造方法： 1．一个带有两个参数的构造方法，用于将width和height属性初化； 2．一个不带参数的构造方法，将矩形初始化为宽和高都为10。 两个方法： 求矩形面积的方法area() 求矩形周长的方法perimeter() （2）通过继承Rect类编写一个具有确定位

    package com.hanqi.test; public class Rect { ; ; public double getWidth() { return width; } public vo ...

  8. 利用JQuery直接调用asp.net后台方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...

  9. 利用JQuery直接调用asp.net后台的简单方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...

随机推荐

  1. neutron routers HA 实验

    测试环境: 5个节点(( controller,2  network,2 compute nodes)) 采用VXLAN+Linux Bridge 1. 确定所有的neutron和nova服务都在运行 ...

  2. js中出现问题--Type Syntax error on token "catch", Identifier expected jquery.js

    解决方案: 1.选中jQuery报错的web工程: 2.右键-->Myeclipse-->Exclude From Validation,选中: 3.继续右键Myeclipse--> ...

  3. 编写高质量代码——html、css、javascript

    [编写高质量代码]1.注释的必要性:增加代码的可读性.2.web标准:由一系列的标准组合而成,其核心理念是将网页的结构.样式.行为分离,所以他可分为:结构标准.样式标准和行为标准.3.一个符合标准的网 ...

  4. 目标检测 — 计算IOU

    1.IOU=交集/并集 #include<iostream> #include<algorithm> #include<stdio.h> #include < ...

  5. 删除OSX中第三方的「偏好设置」程序（.prefPane）

    打开Finder,按Command+Shift+G,输入 /Library/PreferencePanes ~/Library/PreferencePanes 前一个是全局的配置项目录,第二个是当前用 ...

  6. Java_数据交换_JAXB_用法入门

    一.前言 最近有个需求,需要进行xml 与 bean 的相互转化. 使用 JAXB 可完成这个需求. 二.概述 JAXB(Java Architecture for XML Binding) 是一个业 ...

  7. 《Effective C++》——条款08：别让异常逃离析构函数

    考虑如下代码: class Widget{ public: ... ~Widget(){...}//假设这个可能吐出一个异常 }; void doSomething() { std::vector&l ...

  8. 部署你的分布式调用链跟踪框架skywalking

    使用docker-compose 一键部署你的分布式调用链跟踪框架skywalking https://www.cnblogs.com/huangxincheng/p/9666930.html 一旦你 ...

  9. java-05String课堂练习

    1.阅读以下代码查看输出结果 public class StringPool { public static void main(String args[]) { String s0="He ...

  10. Redis底层探秘（三）：字典

    字典,又称为符号表(symbol table).关联数组(associative array)或映射(map),是一种用于保存键值对的抽象数据结构. 字典经常作为一种数据结构内置在很多高级编程语言里面 ...