jQuery调用WebService

1、编写4种WebService方法

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

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService] //令WebService成功传入Json参数,并以Json形式返回结果

[GenerateScriptType(typeof(Person))] //不是必要,但推荐添加(如果Person里面再嵌套另一个复杂类型,则必要声明)

[ToolboxItem(false)]

public class WebService1 : System.Web.Services.WebService

{

///

/// 无任何参数

///

///

[WebMethod]

public string HelloWorld()

{

return "Hello World";

}

///

/// 传入参数

///

///

///

[WebMethod]

public string Hello(string name)

{

return string.Format("Hello {0}", name);

}

///

/// 返回泛型列表

///

///

///

[WebMethod]

public List<int> CreateArray(int i)

{

List<int> list = new List<int>();

while (i >= 0)

{

list.Add(i--);

}

return list;

}

///

/// 返回复杂类型

///

///

///

///

[WebMethod]

public Person GetPerson(string name, int age)

{

return new Person()

{

Name = name,

Age = age

};

}

}

///

/// 复杂类型

///

public class Person

{

public string Name { get; set; }

public int Age { get; set; }

}

2、编写js调用以上方法

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>无标题页title>

<style type="text/css">

input

{

width:200px;

}

<style>

<script type="text/javascript" src="jquery-1[1].2.6.min.js"></script>

<script type="text/javascript">

$(function(){

/*

1、WebService请求类型都为Post,WebService的Url为“[WebServiceUrl]/[WebMethod]”

2、contentType声明为Json

3、data要用Json的字符串格式传入

4、设置了dataType为json后,result就直接为返回的Json对象。

*/

//调用无参数方法

$("#btnHelloWorld").click(function(){

$.ajax({

type: "POST",

contentType:"application/json",

url:"WebService1.asmx/HelloWorld",

data:"{}",

dataType:'json',

success:function(result){

alert(result.d);

}

});

});

//传入1个参数

$("#btnHello").click(function(){

$.ajax({

type: "POST",

contentType:"application/json",

url:"WebService1.asmx/Hello",

data:"{name:'KiMoGiGi'}",

dataType:'json',

success:function(result){

alert(result.d);

}

});

});

//返回泛型列表

$("#btnArray").click(function(){

$.ajax({

type: "POST",

contentType:"application/json",

url:"WebService1.asmx/CreateArray",

data:"{i:10}",

dataType:'json',

success:function(result){

alert(result.d.join(" | "));

}

});

});

//返回复杂类型

$("#btnPerson").click(function(){

$.ajax({

type: "POST",

contentType:"application/json",

url:"WebService1.asmx/GetPerson",

data:"{name:'KiMoGiGi',age:26}",

dataType:'json',

success:function(result){

var person = result.d;

var showText = [];

for(var p in person){

showText.push(p + ":" + person[p]);

}

alert(showText.join("\r\n"));

}

});

});

});

</script>

<head>

<body>

<form />

<p>

<form>

<body>

<html>