admin 管理员组

文章数量: 887021


2023年12月18日发(作者:php分支结构的关键字)

jQuery使用Ajax方法调用WebService

在这里将jQuery使用Ajax 调用WebService 的几个常用的方法做了一个整理,提供给正在找这方面内容的博友,希望能给学习jQuery的朋友一点帮助。 代码

Transitional//EN"

"/TR/xhtml1/DTD/">

jQuery 的WebServices 调用

HelloWorld

传入参数

返回集合

返回复合类型

返回DataSet(XML)

服务器处理中,请稍后。

using System;

using c;

using ;

using ;

using es;

using ;

namespace ng

{

///

/// WebService1 的摘要说明

///

[WebService(Namespace = "/")]

[WebServiceBinding(ConformsTo =

rofile1_1)]

[xItem(false)]

// 若要允许使用 AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。

[Service]

public class WebService1 :

vice

{

///

/// 无参数

///

///

[WebMethod]

public string HelloWorld()

{

return "Hello World ";

}

///

/// 带参数

///

///

///

///

///

///

[WebMethod]

public string GetWish(string value1, string value2,

string value3, int value4)

{

return ("祝您在{3}年里 {0}、{1}、{2}",

value1, value2, value3, value4);

}

///

/// 返回集合

///

///

///

[WebMethod]

public List GetArray(int i)

{

List list = new List();

while (i >= 0)

{

(i--);

}

return list;

}

///

/// 返回一个复合类型

///

///

[WebMethod]

public Class1 GetClass()

{

return new Class1 { ID = "1", Value = "牛年大吉" };

}

///

/// 返回XML

///

///

[WebMethod]

public DataSet GetDataSet()

{

DataSet ds = new DataSet();

DataTable dt = new DataTable();

("ID",

e(""));

("Value",

e(""));

DataRow dr = ();

dr["ID"] = "1";

dr["Value"] = "新年快乐";

(dr);

dr = ();

dr["ID"] = "2";

dr["Value"] = "万事如意";

(dr);

(dt);

return ds;

}

}

//自定义的类,只有两个属性

public class Class1

{

public string ID { get; set; }

public string Value { get; set; }

}

}

切入正题吧。

WebService跟Ajax(我指Jquery框架),大家都不陌生。今天来看一个例子。在同域下Ajax调用WebService方法。(记得是同域,也就是要调用的WebService页面与Ajax请求页面在同一个网站下)。关于异步域调用,我会慢慢补上。

具体操作如下:

一、用VS2008 新建Web站点。这就不用解释了吧。

二、站点下放入Jquery框架,我这里用的是 。没有的从网上下

三、在网站中添加“web服务”

四、将Jquery框架添加到站点下,并且加一个文件,来处理调用

当做完后,网站框架结构为(具体站点,具体分析):

基本大功告成了。因为一下就是些Code的复制了。

页面。这是调用webservice服务的页面。

Ajax调用WebService



姓名:


学号:

姓名:

性别:

年龄:




页面。为WebService服务。

using System;

using c;

using ;

using ;

using es;

namespace WebServiceTest

{

///

/// MyWebService 的摘要说明

///

[WebService(Namespace = "/")]

[WebServiceBinding(ConformsTo = rofile1_1)]

[xItem(false)]

// 若要允许使用 AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。

[Service]

public class MyWebService : vice

{

///

/// 返会语句话

///

[WebMethod]

public string HelloWebService()

{

return "Hello WebService";

}

///

/// 返回一句问候,根据名称

///

[WebMethod]

public string HelloSomeBody(string name)

{

return "Hello " + name;

}

///

/// 设置学生实体,并返回这个实体

///

[WebMethod]

public Student SetStudentInfo(string name, string sex, int age,int sid)

{

Student stuInfo = new Student();

= sid;

= name;

= sex;

= age;

return stuInfo;

}

///

/// 返回泛型数据

///

///

[WebMethod]

public List GetMulStudentInfos()

{

List StuList = new List();

for (int i = 0; i < 10; i++)

{

Student s = new Student();

= i + 1;

= "Tom"+;

= "男";

= i + 1;

(s);

}

return StuList;

}

}

}

注意:我们分别看一下这几个方法的签名,这很重要,因为方法签名决定了你调用必须遵守的规则,本文中我们用的是post方法,所以只给出post的方法签名。

ebService

说明:请求的页面的地址: //HelloWebService;主机地址为:192.168.0.194;端口号:如果不是80端口,必须给出。

调用该服务的完整路径为:192.168.0.194:85//HelloWebService 。(具体情况,具体分析)

omeBody

说明:请求的页面的地址: //HelloSomeBody;主机地址为:192.168.0.194;端口号:如果不是80端口,必须给出。

“name=string”说明,请求该服务时,需要提供参数。

调用该服务的完整路径为:192.168.0.194:85//HelloSomeBody 。(具体情况,具体分析)

dentInfo

说明:请求的页面的地址: //SetStudentInfo;主机地址为:192.168.0.194;端口号:如果不是80端口,必须给出。

注意参数说明。

调用该服务的完整路径为:192.168.0.194:85//SetStudentInfo 。(具体情况,具体分析)

StudentInfos

说明:请求的页面的地址: //HelloSomeBody;主机地址为:192.168.0.194;端口号:如果不是80端口,必须给出。

调用该服务的完整路径为:192.168.0.194:85//GetMulStudentInfos。(具体情况,具体分析)

3.下面是核心部分,也就是调用服务的Ajax脚本代码。

$(document).ready(pageLoad);

// 载入时进行执行的方法

function pageLoad() {

BindCallHello();

BindCallBody();

BindGetSingleStudent();

BindGetMulStudents();

}

// 调用HelloWebService

function BindCallHello(){

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

$.ajax({

type: "post", //访问WebService使用Post方式请求

url: "192.168.0.194:85//HelloWebService", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)

data: {}, //这里是要传递的参数,为Json格式{paraName:paraValue}

contentType: "Application/Json", // 发送信息至服务器时内容编码类型

beforeSend: function(XMLHttpRequest) {

uestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用,因为WebService的请求/返回 类型是相同的,由于请求的是Json,所以,返回的默认是Json)

},

success: function(data) {

var jsonValue = data;

alert(jsonValue.d);// 输出Json

},

complete: function(XMLHttpRequest, textStatus) {

var returnText = seText;

$("#backData").html(returnText);// 输出服务器端返回数据

}

});

});

}

// 调用调用HelloSomeBody

function BindCallBody() {

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

var name = $("#txtName").val();

$.ajax({

type: "post", //访问WebService使用Post方式请求

url: "192.168.0.194:85//HelloSomeBody", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)

data: "{name:'" + name + "'}", //这里是要传递的参数,为Json格式{paraName:paraValue}

contentType: "Application/Json", // 发送信息至服务器时内容编码类型

beforeSend: function(XMLHttpRequest) {

uestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用,因为WebService的请求/返回 类型是相同的,由于请求的是Json,所以,返回的默认是Json)

},

success: function(data) {

var jsonValue = data;

alert(jsonValue.d); // 输出Json

},

complete: function(XMLHttpRequest, textStatus) {

var returnText = seText;

$("#backData").html(returnText); // 输出服务器端返回数据

}

});

});

}

function BindGetSingleStudent() {

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

var stuSid = $("#txtStuSid").val();

var stuName = $("#txtStuName").val();

var stuSex = $("#txtStuSex").val();

var stuAge = $("#txtStuAge").val();

$.ajax({

type: "post", //访问WebService使用Post方式请求

url: "192.168.0.194:85//SetStudentInfo", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)

data: "{name:'" + stuName +"',sex:'"+stuSex+"',age:'"+stuAge+"',sid:'"+stuSid+ "'}", //这里是要传递的参数,为Json格式{paraName:paraValue}

contentType: "Application/Json", // 发送信息至服务器时内容编码类型

beforeSend: function(XMLHttpRequest) {

uestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用,因为WebService的请求/返回 类型是相同的,由于请求的是Json,所以,返回的默认是Json)

},

success: function(data) {

var jsonValue = data;

alert(); // 输出Json

},

complete: function(XMLHttpRequest, textStatus) {

var returnText = seText;

$("#backData").html(returnText); // 输出服务器端返回数据

}

});

});

}

function BindGetMulStudents() {

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

$.ajax({

type: "post", //访问WebService使用Post方式请求

url: "192.168.0.194:85//GetMulStudentInfos", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)

data: {}, //这里是要传递的参数,为Json格式{paraName:paraValue}

contentType: "Application/Json", // 发送信息至服务器时内容编码类型

beforeSend: function(XMLHttpRequest) {

uestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用,因为WebService的请求/返回 类型是相同的,由于请求的是Json,所以,返回的默认是Json)

},

success: function(data) {

var jsonValue = data;

alert(jsonValue.d[0].Sid); // 输出Json

},

complete: function(XMLHttpRequest, textStatus) {

var returnText = seText;

$("#backData").html(returnText); // 输出服务器端返回数据

}

});

});

}

说明:相关注释写的很详细,应该地球人都知道。应该是玩程序的地球人都知道。


本文标签: 调用 返回 方法 请求 服务