GVKun编程网logo

ajax跨域调用webservice的实现代码(ajax跨域访问)

12

对于想了解ajax跨域调用webservice的实现代码的读者,本文将提供新的信息,我们将详细介绍ajax跨域访问,并且为您提供关于ajax跨域请求调用webservice接口、Ajax请求WebSe

对于想了解ajax跨域调用webservice的实现代码的读者,本文将提供新的信息,我们将详细介绍ajax跨域访问,并且为您提供关于ajax 跨域请求调用 webservice 接口、Ajax请求WebService跨域的实现方法(附代码)、ajax调用webservice、Ajax调用WebService(一)的有价值信息。

本文目录一览:

ajax跨域调用webservice的实现代码(ajax跨域访问)

ajax跨域调用webservice的实现代码(ajax跨域访问)

  最近ajax访问webservice遇到跨域的问题,网上搜索资料,总结如下(很多都是觉得人家总结不错的复制下来)

  <<用JSON来传数据,靠JSONP来跨域>>

  先上我的已实现代码:

  前端代码:

rush:js;"> $.ajax({ type: "get",url: "http://localhost/Service1.asmx/getElevatorStatusJsonData?jsoncallback=?",dataType: "jsonp",jsonp: "json",data: "",success: function (result) { var data = eval(result); for (var i = 0; i < data.length; i++) { alert(data[i].ID + "--" + data[i].Name); } },error: function (a,b,c) { alert(c); } });

  服务端代码:

rush:csharp;"> /// /// 获取状态数据信息 /// /// [WebMethod] public void getElevatorStatusJsonData() { List> elevatordatas = new List>(); List searchList = XmlSerializeHelper.XmlDeserializefromFile>(@ConfigUtil.servicePath + ConfigUtil.getConfigByKey("xmlPath") + "查询指令信息.xml",Encoding.UTF8); foreach (SendDicdate item in searchList) { string key = item.portno + "-" + item.bordrate + "-" + item.sendtype; List deviceInfoList = (List)Context.Cache.Get(key); elevatordatas.Add(deviceInfoList); }

String result = "";
DataContractJsonSerializer json = new DataContractJsonSerializer(elevatordatas.GetType());
using (MemoryStream stream = new MemoryStream())
{
json.WriteObject(stream,elevatordatas);
result = Encoding.UTF8.GetString(stream.ToArray());
}
String jsoncallback = HttpContext.Current.Request["jsoncallback"];
result = jsoncallback + '(' + result + ')';
HttpContext.Current.Response.Write(result);
HttpContext.Current.Response.End();

}

  c#

   以上是调用c#服务端的实现代码,下面的是java端的,参数可能有差异,但原理是相通的

  java:

  

rush:java;"> String callbackFunName = context.Request["callbackparam"];   context.Response.Write(callbackFunName + "([ { \"name\":\"John\"}])");

 

 PS:客户端的jsonp参数是用来通过url传参,传递jsonpCallback参数的参数名,比较拗口,通俗点讲:

  jsonp: ""

  jsonpCallback:""

  顺带一提:在chrome浏览器里,还可以在服务端设置header信息context.response.addheader("Access-Control-Allow-Origin","*");来达到跨域请求的目的,并且不需要设置ajax以下参数

  

rush:java;"> dataType : "jsonp",  jsonp: "callbackparam",  jsonpCallback:"jsonpCallback1"

  以正常ajax请求方式就可以获得数据。

下面是原理,看别人讲解的,感觉很有道理:

  1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;

  2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如

  3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;

  4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;

  5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。

  6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。

  7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback 参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数 据了。

调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码,请你返回给我”,于是服务器就可以按照客户端的需求来生成js脚本并响应了。

rush:xhtml;">

是不是有点奇怪?为什么我这次没有写flightHandler这个函数呢?而且竟然也运行成功了!哈哈,这就是jQuery的功劳了,jquery在处理jsonp类型的ajax时(还是忍不住吐槽,虽然jquery也把jsonp归入了ajax,但其实它们真的不是一回事儿),自动帮你生成回调函数并把数据取出来供success属性方法来调用,是不是很爽呀?

ajax 跨域请求调用 webservice 接口

ajax 跨域请求调用 webservice 接口

1.WebService 接口编写

步骤:新建 web 项目 =》添加 web service=》编写方法接口 =》然后发布 (本地测试可以直接把这个 web service 运行起来)。

关键如何让外部 Ajax 调用。

首先,配置 WebService 项目配置文件(web.config)红色部分必须配置,这样第三方才能调用接口方法(经测试通过,直接粘贴就 ok),不懂可以百度。

 

<configuration>
    <system.web>
      <webServices>
        <protocols>
          <add name="HttpSoap"/>
          <add name="HttpPost"/>
          <add name="HttpGet"/>
          <add name="Documentation"/>
        </protocols>
      </webServices>
        <compilation debug="true" targetFramework="4.0" />
    </system.web>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
        <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

2、其次,这里贴出 WebService 中代码部分,这里我自定义一个返回一个 Person 集合 GetPersonList (),可供 Ajax 调用。

(1)发布时需要配置 [WebService (Namespace = "http://192.168.1.90:5555/")]// 这里定义你发布以后的域名地址。当然本地测试使用 localhost 就可以或者使用默认的即可。

(2)要放开 [System.Web.Script.Services.ScriptService] 的注释。

以上两步做到写接口发布 WebService,访问 http://192.168.1.90:5555/XXX.asmx 地址。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace MyWebService
{
    /// <summary>
    /// MyWebService 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://localhost:47737/")] 
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。 
    [System.Web.Script.Services.ScriptService]
    public class MyWebService : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        [WebMethod]
        public int Add(int num1,int num2)
        {
            return num1 + num2;
        }
    }
}

3. 第三方 Ajax 调用。

$.ajax({
                url: "http://localhost:47737/MyWebService.asmx/Add",
                type: "post",
                data: "{ ''num1'': 2,''num2'': 5 }",
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    alert(data.d);
                },
                error: function () {
                    alert("发送ajax请求失败!");
                }
            });

后记:

 1)ajax 请求头设置过 content-type:''application/json'' 之类的返回 json 字符串,用 get 请求对应的 webservice 时会出现这个错误,去掉 content-type 后 get/post 请求都可以正确执行,但返回的是 xml,不是 json。

2)如果一定要可以 get 请求 webservice,需要在 ScriptMethod 属性指定 UseHttpGet=true,web.config 中配置的 get/post 访问应该只是针对返回 xml 的,而不是设置过 content-type:''application/json'' 返回 json 的,所以 get 请求会出错。

3)Ajax 的 data 属性如果向 WebService 传递一个类对象的话,需要外部再包一层,并以如下形式传参:

//Model为WebService参数中的对象名,注意不是类名
{"Model":{"ClassId":0,"ClassName":"a","ClassCount":1,"ReturnInfo":null,"ReturnVal":0}}

 

4、序列化表单函数

//** 序列化表单为json对象  */
            $.fn.serializeObject = function() {
                var o = {};
                var a = this.serializeArray();
                $.each(a, function() {
                    if (o[this.name]) {
                        if (!o[this.name].push) {
                            o[this.name] = [ o[this.name] ];
                        }
                        o[this.name].push(this.value || '''');
                    } else {
                        o[this.name] = this.value || '''';
                    }
                });
                return o;
            }

            /** 表单序列化成json字符串的方法  */
            function form2JsonString(formId) {
                var paramArray = $(''#'' + formId).serializeArray();
                /*请求参数转json对象*/
                var jsonObj = {};
                $(paramArray).each(function () {
                    jsonObj[this.name] = this.value;
                });
                // json对象再转换成json字符串
                return JSON.stringify(jsonObj);
            }

 

Ajax请求WebService跨域的实现方法(附代码)

Ajax请求WebService跨域的实现方法(附代码)

这次给大家带来Ajax请求WebService跨域的实现方法(附代码),Ajax请求WebService跨域的注意事项有哪些,下面就是实战案例,一起来看一下。

1、背景

  用Jquery中Ajax方式在asp.net开发环境中WebService接口的调用

2、出现的问题

原因分析:浏览器同源策略的影响(即JavaScript或Cookie只能访问同域下的内容);

3、解决方案:

(1) JSONP:只支持GET方式

(2) CROS:跨域资源共享

以下为CROS解决方案:

  a.在WebService接口加上响应头信息:

  b.在web.config文件中加上相关配置节信息:

运用a或者b的解决方案后,浏览器头信息中变动如下:

最终问题得以较好的解决,但对于此方案各个浏览器支持情况不同,附图如下:

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Bootstrap的DatePicker属性怎么选择日期范围

AJAX注册页面异步请求的方法实现

以上就是Ajax请求WebService跨域的实现方法(附代码)的详细内容,更多请关注php中文网其它相关文章!

ajax调用webservice

ajax调用webservice

<html>
<head>
<title>通过ajax调用WebService服务</title>
<script>
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
function sendMsg(){
var name = document.getElementById('name').value;
//服务的地址
var wsUrl = 'http://192.168.1.1:8080/hello';
//请求体

var soap = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:q0="http://ws.itcast.cn/"

xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">' +

' <soapenv:Body> <q0:sayHello><arg0>'+name+'</arg0> </q0:sayHello> </soapenv:Body> </soapenv:Envelope>'; //打开连接 xhr.open('POST',wsUrl,true); //重新设置请求头 xhr.setRequestHeader("Content-Type","text/xml;charset=UTF-8"); //设置回调函数 xhr.onreadystatechange = _back; //发送请求 xhr.send(soap); } function _back(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //alert('调用Webservice成功了'); var ret = xhr.responseXML; var msg = ret.getElementsByTagName('return')[0]; document.getElementById('showInfo').innerHTML = msg.text; //alert(msg.text); } } } </script> </head> <body> <input type="button" value="ajax调用WebService服务" onclick="sendMsg();"> <input type="text" id="name"> <div id="showInfo"> </div> </body> </html>

Ajax调用WebService(一)

Ajax调用WebService(一)

Ajax调用WebService(一)

标签: webserviceajaxxmlhttprequestfunctionjsoninput
2011-07-05 17:51 22650人阅读 评论(12) 收藏 举报
本文章已收录于:


分类:
作者同类文章 X
作者同类文章 X


版权声明:本文为博主原创文章,未经博主允许不得转载。

一些感悟:

最近工作一直都很忙。很久没有更新自己的博客了。有很多东西要写。也只能慢慢写。真正能讲出来的东西,才能叫做真正掌握了吧。
我很喜欢一句话:“纸上学来终觉浅,绝知此事要躬行”。所以,在工作之余,自己做一些Dome并且测试通过,才放到网上来,要不就是对知识的不尊重。

切入正题吧。

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

具体操作如下:

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

二、站点下放入Jquery框架,我这里用的是 jquery-1.4.2.min.js。没有的从网上下

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

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

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

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

1.Default.aspx页面。这是调用webservice服务的页面。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Ajax调用WebService</title>

<script src="Js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="Js/CallWebService.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<hr />
<input id="btnCallHello" type="button" value="调用HelloWebService" />
<hr />
姓名:<input id="txtName" type="text" /><br />
<input id="btnCallBody" type="button" value="调用HelloSomeBody" />
<hr />
学号:<input id="txtStuSid" type="text" /><br />
姓名:<input id="txtStuName" type="text" /><br />
性别:<input id="txtStuSex" type="text" /><br />
年龄:<input id="txtStuAge" type="text" /><br />
<input id="btnSinStuInfo" type="button" value="调用SetStudentInfo" /><br />
<hr />
<input id="btnMulStuInfos" type="button" value="调用GetMulStudentInfos" />
<hr />
</div>
<div id="backData"></div>
</form>
</body>
</html>

2.MyWebService.asmx页面。为WebService服务。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace WebServiceTest
{
/// <summary>
/// MyWebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://www.mywebaddr.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolBoxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class MyWebService : System.Web.Services.WebService
{
/// <summary>
/// 返会语句话
/// </summary>
[WebMethod]
public string HelloWebService()
{
return "Hello WebService";
}

/// <summary>
/// 返回一句问候,根据名称
/// </summary>
[WebMethod]
public string HelloSomeBody(string name)
{
return "Hello " + name;
}


/// <summary>
/// 设置学生实体,并返回这个实体
/// </summary>
[WebMethod]
public Student SetStudentInfo(string name,string sex,int age,int sid)
{
Student stuInfo = new Student();
stuInfo.Sid = sid;
stuInfo.Name = name;
stuInfo.Sex = sex;
stuInfo.Age = age;

return stuInfo;

}

/// <summary>
/// 返回泛型数据
/// </summary>
/// <returns></returns>
[WebMethod]
public List<Student> GetMulStudentInfos()
{
List<Student> StuList = new List<Student>();
for (int i = 0; i < 10; i++)
{
Student s = new Student();
s.Sid = i + 1;
s.Name = "Tom"+s.Sid;
s.Sex = "男";
s.Age = i + 1;
StuList.Add(s);
}
return StuList;

}


}
}

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

1.HelloWebService

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

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

2.HelloSomeBody

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

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

http://192.168.0.194:85/MyWebService.asmx/HelloSomeBody。(具体情况,具体分析)

3.SetStudentInfo

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

注意参数说明。

http://192.168.0.194:85/MyWebService.asmx/SetStudentInfo

4.GetMulStudentInfos

http://192.168.0.194:85/MyWebService.asmx/GetMulStudentInfos

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

$(document).ready(pageLoad);
// 载入时进行执行的方法
function pageLoad() {
BindCallHello();
BindCallBody();
BindGetSingleStudent();
BindGetMulStudents();
}

// 调用HelloWebService
function BindCallHello(){
$("#btnCallHello").click(function() {
$.ajax({
type: "post",//访问WebService使用Post方式请求

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

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

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

beforeSend: function(XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept","Application/Json"); // 接受的数据类型。(貌似不起作用,因为WebService的请求/返回 类型是相同的,由于请求的是Json,所以,返回的默认是Json)
},
success: function(data) {
var jsonValue = data;

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

},
complete: function(XMLHttpRequest,textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText);// 输出服务器端返回数据
}

});


});

}

// 调用调用HelloSomeBody
function BindCallBody() {
$("#btnCallBody").click(function() {
var name = $("#txtName").val();
$.ajax({
type: "post",//访问WebService使用Post方式请求

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

data: "{name:'" + name + "'}",
success: function(data) {
var jsonValue = data;

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

},textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#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: "http://192.168.0.194:85/MyWebService.asmx/SetStudentInfo",//调用Url(WebService的地址和方法名称组合---WsURL/方法名)

data: "{name:'" + stuName +"',sex:'"+stuSex+"',age:'"+stuAge+"',sid:'"+stuSid+ "'}",
success: function(data) {
var jsonValue = data;

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

},textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 输出服务器端返回数据
}

});


});
}

function BindGetMulStudents() {
$("#btnMulStuInfos").click(function() {
$.ajax({
type: "post",//访问WebService使用Post方式请求

url: "http://192.168.0.194:85/MyWebService.asmx/GetMulStudentInfos",
success: function(data) {
var jsonValue = data;

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

},textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 输出服务器端返回数据
}

});


});


}

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

总结:

至此,所有代码知识点,都已经贴出来了。

细心的读者应该能发现,我之所以很赘述的把4个服务方法都列了出来,其实是想让大家看清楚,每个方法的侧重点不同。调用方法上包括:无参数的调用,参数调用。

返回值类型上包括:返回字符串,返回自定义实体数据。

所有返回值都为Json数据。Json数据作为返回值,近来大受亲睐。

希望能给您带来帮助。如果您有更好的方式或者知识,请不吝赐教。谢谢!


public class MyWebService : System.Web.Services.WebService
{
/// <summary>
/// 返会语句话
/// </summary>
[WebMethod]
public string HelloWebService()
{
return "Hello WebService";
}

/// <summary>
/// 返回一句问候,根据名称
/// </summary>
[WebMethod]
public string HelloSomeBody(string name)
{
return "Hello " + name;
}


/// <summary>
/// 设置学生实体,并返回这个实体
/// </summary>
[WebMethod]
public Student SetStudentInfo(string name,int sid)
{
Student stuInfo = new Student();
stuInfo.Sid = sid;
stuInfo.Name = name;
stuInfo.Sex = sex;
stuInfo.Age = age;

return stuInfo;

}

/// <summary>
/// 返回泛型数据
/// </summary>
/// <returns></returns>
[WebMethod]
public List<Student> GetMulStudentInfos()
{
List<Student> StuList = new List<Student>();
for (int i = 0; i < 10; i++)
{
Student s = new Student();
s.Sid = i + 1;
s.Name = "Tom"+s.Sid;
s.Sex = "男";
s.Age = i + 1;
StuList.Add(s);
}
return StuList;

}


}


<script type="text/javascript">
$(document).ready(pageLoad);
// 载入时进行执行的方法
function pageLoad() {
BindCallHello();
BindCallBody();
BindGetSingleStudent();
BindGetMulStudents();
}


// 调用HelloWebService
function BindCallHello() {
$("#btnCallHello").click(function () {
$.ajax({
type: "post",//访问WebService使用Post方式请求

url: "http://localhost:65451/MyWebService.asmx/HelloWebService",//调用Url(WebService的地址和方法名称组合---WsURL/方法名)

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

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

beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept",
success: function (data) {
var jsonValue = data;

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

},
complete: function (XMLHttpRequest,textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 输出服务器端返回数据
}

});


});

}

// 调用调用HelloSomeBody
function BindCallBody() {
$("#btnCallBody").click(function () {
var name = $("#txtName").val();
$.ajax({
type: "post",//访问WebService使用Post方式请求

url: "http://localhost:65451/MyWebService.asmx/HelloSomeBody",//调用Url(WebService的地址和方法名称组合---WsURL/方法名)

data: "{name:'" + name + "'}",textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#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: "http://localhost:65451/MyWebService.asmx/SetStudentInfo",//调用Url(WebService的地址和方法名称组合---WsURL/方法名)

data: "{name:'" + stuName + "',sex:'" + stuSex + "',age:'" + stuAge + "',sid:'" + stuSid + "'}",
success: function (data) {
var jsonValue = data;

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

},textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 输出服务器端返回数据
}

});


});
}

function BindGetMulStudents() {
$("#btnMulStuInfos").click(function () {
$.ajax({
type: "post",//访问WebService使用Post方式请求

url: "http://localhost:65451/MyWebService.asmx/GetMulStudentInfos",
success: function (data) {
var jsonValue = data;

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

},textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 输出服务器端返回数据
}

});


});


}
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Ajax调用WebService</title>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script src="Scripts/CallWebService.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <hr /> <input id="btnCallHello" type="button" value="调用HelloWebService" /> <hr /> 姓名:<input id="txtName" type="text" /><br /> <input id="btnCallBody" type="button" value="调用HelloSomeBody" /> <hr /> 学号:<input id="txtStuSid" type="text" /><br /> 姓名:<input id="txtStuName" type="text" /><br /> 性别:<input id="txtStuSex" type="text" /><br /> 年龄:<input id="txtStuAge" type="text" /><br /> <input id="btnSinStuInfo" type="button" value="调用SetStudentInfo" /><br /> <hr /> <input id="btnMulStuInfos" type="button" value="调用GetMulStudentInfos" /> <hr /> </div> <div id="backData"></div> </form> </body> </html>

我们今天的关于ajax跨域调用webservice的实现代码ajax跨域访问的分享已经告一段落,感谢您的关注,如果您想了解更多关于ajax 跨域请求调用 webservice 接口、Ajax请求WebService跨域的实现方法(附代码)、ajax调用webservice、Ajax调用WebService(一)的相关信息,请在本站查询。

本文标签: