• 92阅读
  • 0回复

[Aspxnet交流] JQuery直接调用asp.net后台WebMethod方法


会员


发帖
11
楼主  发表于:2019/2/26 19:29
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
[WebMethod]   命名空间

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


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

前台<JQuery>:


  1. $(function() {
  2. $("#btnOK").click(function() {
  3. $.ajax({
  4. //要用post方式
  5. type: "Post",
  6. //方法所在页面和方法名
  7. url: "data.aspx/SayHello",
  8. contentType: "application/json; charset=utf-8",
  9. dataType: "json",
  10. success: function(data) {
  11. //返回的数据用data.d获取内容
  12. alert(data.d);
  13. },
  14. error: function(err) {
  15. alert(err);
  16. }
  17. });
  18. //禁用按钮的提交
  19. return false;
  20. });
  21. });

2、带参数的方法调用

后台<C#>:


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

前台<JQuery>:


  1. $(function() {
  2. $("#btnOK").click(function() {
  3. $.ajax({
  4. type: "Post",
  5. url: "data.aspx/GetStr",
  6. //方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字
  7. data: "{'str':'我是','str2':'XXX'}",
  8. contentType: "application/json; charset=utf-8",
  9. dataType: "json",
  10. success: function(data) {
  11. //返回的数据用data.d获取内容
  12. alert(data.d);
  13. },
  14. error: function(err) {
  15. alert(err);
  16. }
  17. });
  18. //禁用按钮的提交
  19. return false;
  20. });
  21. });

3、返回数组方法的调用

后台<C#>:


  1. using System.Web.Script.Services;
  2. [WebMethod]
  3. public static List<string> GetArray()
  4. {
  5. List<string> li = new List<string>();
  6. for (int i = 0; i < 10; i++)
  7. li.Add(i + "");
  8. return li;
  9. }

前台<JQuery>:


  1. $(function() {
  2. $("#btnOK").click(function() {
  3. $.ajax({
  4. type: "Post",
  5. url: "data.aspx/GetArray",
  6. contentType: "application/json; charset=utf-8",
  7. dataType: "json",
  8. success: function(data) {
  9. //插入前先清空ul
  10. $("#list").html("");
  11. //递归获取数据
  12. $(data.d).each(function() {
  13. //插入结果到li里面
  14. $("#list").append("<li>" + this + "</li>");
  15. });
  16. alert(data.d);
  17. },
  18. error: function(err) {
  19. alert(err);
  20. }
  21. });
  22. //禁用按钮的提交
  23. return false;
  24. });
  25. });
  26. /// <reference path="jquery-1.4.2-vsdoc.js"/>
  27. $(function() {
  28. $("#btnOK").click(function() {
  29. $.ajax({
  30. type: "Post",
  31. url: "data.aspx/GetArray",
  32. contentType: "application/json; charset=utf-8",
  33. dataType: "json",
  34. success: function(data) {
  35. //插入前先清空ul
  36. $("#list").html("");
  37. //递归获取数据
  38. $(data.d).each(function() {
  39. //插入结果到li里面
  40. $("#list").append("<li>" + this + "</li>");
  41. });
  42. alert(data.d);
  43. },
  44. error: function(err) {
  45. alert(err);
  46. }
  47. });
  48. //禁用按钮的提交
  49. return false;
  50. });
  51. });




快速回复