您的位置: 首页  >  IT文章  >  JQuery直接调用asp.net后台WebMethod方法 JQuery直接调用asp.net后台WebMethod方法 AJAX向后台WebMethod static方法传递数组并接收  Jquery ajax传递复杂参数给WebService

JQuery直接调用asp.net后台WebMethod方法 JQuery直接调用asp.net后台WebMethod方法 AJAX向后台WebMethod static方法传递数组并接收  Jquery ajax传递复杂参数给WebService

分类: IT文章 • 2025-01-03 14:49:25

 参考：

AJAX向后台WebMethod static方法传递数组并接收 

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
[WebMethod]   命名空间

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

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


前台<JQuery>:

[javascript] view plain copy
 
  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.         //禁用按钮的提交     
  20.         return false;     
  21.     });     
  22. });  


2、带参数的方法调用

后台<C#>:

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


前台<JQuery>:

[javascript] view plain copy
 
  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.         //禁用按钮的提交     
  20.         return false;     
  21.     });     
  22. });  

3、带数组参数的方法调用

　　前台

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <script src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <script>
        $(document).ready(function () {
            var myCars = new Array();
            myCars[0] = "Saab";
            myCars[1] = "Volvo";
            myCars[2] = "BMW";
 
            $.ajax({
                type: "POST",
                url: "<%=Request.Url.AbsolutePath%>/Concat",
                data: JSON.stringify({ arr: myCars }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert(response.d);
                },
                failure: function () {
                    alert("fail");
                }
            });
        });
    </script>
C# code
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[System.Web.Script.Services.ScriptService]
public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
 
    [WebMethod]
    public static string Concat(List<string> arr)
    {
        string result = "";
        for (int i = 0; i < arr.Count; i++)
        {
            result += arr[i];
        }
        return result;
    }
}

4、返回数组方法的调用

后台<C#>:

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


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

Jquery ajax传递复杂参数给WebService

Entity:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Runtime.Serialization;
 
namespace Entity
{
    [DataContract]
    public class User
    {
        [DataMember]
        public string Name
        {
            get;
            set;
        }
 
        [DataMember]
        public int Age
        {
            get;
            set;
        }
    }
}

WebService:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using Entity;
 
namespace JQuery.Handler
{
 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class UserService1 : System.Web.Services.WebService
    {
 
        [WebMethod]
        public string ComplexType(User hero,List<User> users)
        {
            return hero.Name + " has " + users.Count + " people!";
        }
    }
}

Html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax</title>
    <script src="../Scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnWeb").click(function () {
                $.ajax(
                {
                    type: "post",
                    url: "../Handler/UserService.asmx/ComplexType",
                    dataType:"json",
                    contentType:"application/json",
                    data: '{"hero": {"Name":"zhoulq","Age":27},"users":[{"Name":"zhangs","Age":22},{"Name":"wangw","Age":26},{"Name":"liuj","Age":25},
                           {"Name":"luos","Age":24}]}',
                    success: function (data) { $("#web").text(data.d); }
                });
            });
        });
    </script>
</head>
<body>
    <input id="btnWeb" type="button" value="请求WebService" /><label id="web"></label>
</body>
</html>

相关推荐