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

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

[WebMethod]   命名空间

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

后台:

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、带参数的方法调用

后台:

using System.Web.script.Services;
 
[WebMethod]
public static string GetStr(string str,
string str2)
{
  return str
 + str2;
}

前台:

$(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、返回数组方法的调用

后台:

using System.Web.script.Services;
 
[WebMethod]
public static List
 GetArray()
{
  List
 li = new List();
 
  for (int i
 = 0; i < 10; i++)
    li.Add(i
 + "");
 
  return li;
}

前台:

$(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("
" +
this +
"
"); 
 }); 
 
 alert(data.d); 
      }, 
      error:
function(err)
 {  
 alert(err); 
      } 
    }); 
 
    //禁用按钮的提交 
    return false; 
  }); 
});
///
 
$(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("
" +
this +
"
");
 });
 
 alert(data.d);
      },
      error:
function(err)
 {
 alert(err);
      }
    });
 
    //禁用按钮的提交
    return false;
  });
});

4、返回Hashtable方法的调用

后台:

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;
}

前台:

$(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?
 


  1
  qwe


  2
  asd





  1
  qwe


  2
  asd

前台:

$(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("
id:" +
 $(this).find("id").text()
 +"
"); 
   $("#list").append("
Name:"+
 $(this).find("name").text()
 + "
"); 
 }) 
      }, 
      error:
function(result,
 status) { //如果没有上面的捕获出错会执行这里的回调函数 
 alert(status); 
      } 
    }); 
 
    //禁用按钮的提交 
    return false; 
  }); 
});

以上就是小编为大家带来的利用JQuery直接调用asp.net后台的简单方法全部内容了，希望大家多多支持考高分网~