1. 首页
  2. MYSQL
  3. Jquery ajax传递复杂参数给WebService

Jquery ajax传递复杂参数给WebService

•mysql•阅读 588

参考：

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

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

[WebMethod] 命名空间

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

后台<C#>:

[csharp]view plaincopy

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

前台<JQuery>:

[javascript]view plaincopy

  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#>:

[csharp]view plaincopy

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

前台<JQuery>:

[javascript]view plaincopy

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

　　前台

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<scriptsrc="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]

publicpartialclassWebForm1 : System.Web.UI.Page

{

protectedvoidPage_Load(objectsender, EventArgs e)

{

}

[WebMethod]

publicstaticstringConcat(List<string> arr)

{

stringresult ="";

for(inti = 0; i < arr.Count; i++)

{

result += arr[i];

}

returnresult;

}

}

4、返回数组方法的调用

后台<C#>:

[csharp]

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

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

usingSystem;

usingSystem.Collections.Generic;

usingSystem.Linq;

usingSystem.Text;

usingSystem.Runtime.Serialization;

namespaceEntity

{

[DataContract]

publicclassUser

{

[DataMember]

publicstringName

{

get;

set;

}

[DataMember]

publicintAge

{

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

usingSystem;

usingSystem.Collections.Generic;

usingSystem.Linq;

usingSystem.Web;

usingSystem.Web.Services;

usingEntity;

namespaceJQuery.Handler

{

[WebService(Namespace ="http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.ComponentModel.ToolboxItem(false)]

[System.Web.Script.Services.ScriptService]

publicclassUserService1 : System.Web.Services.WebService

{

[WebMethod]

publicstringComplexType(User hero,List<User> users)

{

returnhero.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 csharp string">"btnWeb"type="button"value="请求WebService"/><label csharp string">"web"></label>

</body>

</html>

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。