• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

利用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;
  });
});

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ASP.NET使用受保护的配置加密配置信息发布时间:2022-07-10
下一篇:
我的BLog开源了,基于Asp.netMVC写的发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap