首页 > 编程 > JavaScript > 正文

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

2019-11-20 08:39:12
字体:
来源:转载
供稿:网友

利用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后台的简单方法全部内容了,希望大家多多支持武林网~

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表