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

[WebMethod]   命名空间

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

后台<C#>:

using System.Web.Script.Services;
  
[WebMethod]
public static string SayHello()
{
   return "Hello
 Ajax!";
}
前台<jQuery>:
$(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#>:
using System.Web.Script.Services;
  
[WebMethod]
public static string GetStr(string str,
string str2)
{
  return str
 + str2;
}
前台<JQuery>:
$(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#>:
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>:
$(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#>:
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>:
$(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:
  
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>:
$(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直接调用asp.net后台的简单方法的更多相关文章

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

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

  2. JQuery Ajax调用asp.net后台方法

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

  3. jQuery.ajax()调用asp.net后台方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.介意方法名不要重名 建一个WebFormAjax名aspx文件 CS <%@ Page Language=" ...

  4. JQuery直接调用asp.net后台WebMethod方法

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

  5. [ASP.NET]JQuery直接调用asp.net后台WebMethod方法

    在项目开发碰到此类需求,特此记录下经项目验证的方法总结. 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod] 命名空间 1.无参数的方法调用 注意:方 ...

  6. JQuery直接调用asp.net后台WebMethod方法(转)

    转自  http://blog.csdn.net/handsometone1982/article/details/7684894 利用JQuery的$.ajax()可以很方便的调用asp.net的后 ...

  7. .Net中jQuery.ajax()调用asp.net后台方法 总结

    利用JQuery的$.ajax()调用.Net后台方法有多种方式, 不多说了  直接上代码 前台代码 <script type="text/javascript"> $ ...

  8. jQuery.ajax()调用asp.net后台方法(非常重要)

    http://www.cnblogs.com/zxhoo/archive/2011/01/30/1947752.html 用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先 ...

  9. jQuery调用Asp.Net后台方法

    常用的ajax就不讲了,这里主要是说通过ajax调用asp.net后台的cs文件暴露的方法. 前台: <%@ Page Language="C#" AutoEventWire ...

随机推荐

  1. linux 调试利器gdb, strace, pstack, pstree, lsof

    1) 如何使用strace+pstack利器分析程序性能? http://www.cnblogs.com/bangerlee/archive/2012/04/30/2476190.html 此文有详细 ...

  2. Cocos2d-x添加Android手机震动

    这个震动需要调用adnroid系统的方法,所以需要C++调用java,JNI这里就不多做介绍了,需要的可以自己去查找下相关资料,如果你只是需要实现这个功能,相信你看完本文,应该就OK了! 1.首先,修 ...

  3. nyoj 504 课程设计

    课程设计 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 新学期伊始,Gangster 老师又在为如何给学生分配课程设计题目而犯愁,Gangster老师老共有 N 名学生 ...

  4. 常见电源品牌大揭密(转贴自pceva,作者royalk)

    常见电源品牌大揭密(转贴自pceva,作者royalk) 介绍电源品牌代工厂之前,必须介绍一下电源分类: 标准电源 标准电源就是电脑城装机用得最多的电源,性能正常,外观一般,原生接线,也没有什么风扇停 ...

  5. 登陆时不同浏览器获取session存在的相关疑问?

    问题1:在同一个电脑上,登陆成功后,将登陆信息存放到session域中后,使用另一个浏览器访问时,能否获取这个session域中的值? request.getSession().setAttribut ...

  6. JAVA里使用CKEditor和CKFinder的配置

    在JSP里使用CKEditor和CKFinder的配置 CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传. “预览”中有一大堆鸟语,看 ...

  7. AM335x移植linux内核_转

    AM335x移植linux内核 该博客中详细介绍了移植linux内核到AM335x上相关,设备驱动采用设备树(DT)方式加载,包含设备启动.uboot.kernel.driver.rootfs及简单上 ...

  8. ubuntu 命令 dpkg -l

    dpkg -l 每条记录对应一个软件包,每条记录的第一, 二, 三个字符是软件包的状态标识, 后边依此是软件包名称,版本号, 和简单描述. 关于每个状态,可以参考 man dpkg-query 关于每 ...

  9. Android中新建的文件在R没有显示相应的文件解决的方法总结

    我们有时会发现当我们新建一个文件或者目录在Generated Java Files(gen)文件的R.java中没有生成相应的静态类或者静态属性.此时你可能出现了以下的情况.注意參照解决. 一般正常情 ...

  10. iOS边练边学--(Quartz2D)图片裁剪,带圆环的裁剪

    一.图片裁剪,示意图 二.带圆环的图片裁剪示意图