WebService Ajax调用
1.Html
<!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>
<title></title>
<script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
// 无参
function BindCallHello() {
$("#btnCallHello").click(function () {
$.ajax({
type: "post", //访问WebService使用Post方式请求
url: "http://localhost:5606/Handler/UserService.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); // 输出服务器端返回数据
}
});
});
}
// 传递单个参数
function BindCallBody() {
$("#btnCallBody").click(function () {
var name = $("#txtName").val();
$.ajax({
type: "post", //访问WebService使用Post方式请求
url: "http://localhost:5606/Handler/UserService.asmx/HelloSomeBody", //调用Url(WebService的地址和方法名称组合---WsURL/方法名) data: "{name:'" + name + "'}", //这里是要传递的参数，为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); // 输出服务器端返回数据
} }); }); }
//传递多个参数，返回类对象
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:5606/Handler/UserService.asmx/SetStudentInfo", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)
data: "{name:'" + stuName + "',sex:'" + stuSex + "',age:'" + stuAge + "',sid:'" + stuSid + "'}", //这里是要传递的参数，为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.Sid); // 输出Json $(data.d).each(function () {
alert(this['Age'] + this["Name"]);
});
},
complete: function (XMLHttpRequest, textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 输出服务器端返回数据
}
});
});
}
//返回List集合
function BindGetMulStudents() {
$("#btnMulStuInfos").click(function () {
$.ajax({
type: "post", //访问WebService使用Post方式请求
url: "http://localhost:5606/Handler/UserService.asmx/GetMulStudentInfos", //调用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[0].Sid); // 输出Json $(data.d).each(function () {
alert(this['Age'] + this["Name"]);
});
},
complete: function (XMLHttpRequest, textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 输出服务器端返回数据
}
});
});
}
//返回DataSet
function BindGetDataSet() {
$.ajax({
type: "POST",
url: "http://localhost:5606/Handler/UserService.asmx/GetDataSet",
data: "{}",
dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了
success: function (result) {
//演示一下捕获
try {
$(result).find("Table1").each(function () {
$('#backData').append($(this).find("ID").text() + " " + $(this).find("Value").text());
});
}
catch (e) {
alert(e);
return;
}
},
error: function (result, status) { //如果没有上面的捕获出错会执行这里的回调函数
if (status == 'error') {
alert(status);
}
}
});
}
//传递类对象、集合对象
function BindSetClassListInfos() {
$.ajax({
type: "post",
url: "http://localhost:5606/Handler/UserService.asmx/ComplexType",
dataType: "json",
contentType: "application/json",
data: '{"hero": {"Name":"sxl","Age":25},"users":[{"Name":"zhang1","Age":22},{"Name":"wang1","Age":26},{"Name":"liu1","Age":25},{"Name":"luo1","Age":24}]}',
success: function (data) { $("#web").text(data.d); }
});
}
</script>
</head>
<body>
<input type="button" id="btn5" value="返回DataSet" onclick="BindGetDataSet();" /><hr />
<input id="btnWeb" type="button" value="传递类对象、集合对象" onclick="BindSetClassListInfos();" /><label
id="web"></label>
<div>
<hr />
<input id="btnCallHello" type="button" value="调用无参方法，返回字符串" onclick="BindCallHello();" />
<hr />
姓名：<input id="txtName" type="text" /><br />
<input id="btnCallBody" type="button" value="调用有参方法，返回字符串" onclick="BindCallBody();" />
<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" onclick="BindGetSingleStudent();" /><br />
<hr />
<input id="btnMulStuInfos" type="button" value="调用GetMulStudentInfos" onclick="BindGetMulStudents();" />
<hr />
</div>
<div id="backData">
</div>
</body>
</html>
2.WebService
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using AjaxDemo.ClassFile;
using System.Data; namespace AjaxDemo.Handler
{
/// <summary>
/// UserService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class UserService : 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 = ; i < ; i++)
{
Student s = new Student();
s.Sid = i + ;
s.Name = "Tom" + s.Sid;
s.Sex = "男";
s.Age = i + ;
stuList.Add(s);
}
return stuList; }
[WebMethod]
public string ComplexType(User hero, List<User> users)
{
return hero.Name + " has " + users.Count + "people !";
} /// <summary>
/// 返回XML
/// </summary>
/// <returns></returns>
[WebMethod]
public DataSet GetDataSet()
{
DataSet ds = new DataSet();
DataTable dt = new DataTable();
dt.Columns.Add("ID", Type.GetType("System.String"));
dt.Columns.Add("Value", Type.GetType("System.String"));
DataRow dr = dt.NewRow();
dr["ID"] = "";
dr["Value"] = "新年快乐";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = "";
dr["Value"] = "万事如意";
dt.Rows.Add(dr);
ds.Tables.Add(dt);
return ds;
}
}
}
3. 实体类
public class Student
{
public int Sid { get; set; }
public string Name { get; set; }
public string Sex { get; set; }
public int Age { get; set; }
}
public class User
{
public string Name { get; set; }
public int Age { get; set; }
public int ID { get; set; }
}
WebService Ajax调用的更多相关文章
- asp.net WebService+Ajax调用
default.aspx 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&qu ...
- ASP.NET实现二维码 ASP.Net上传文件 SQL基础语法 C# 动态创建数据库三（MySQL） Net Core 实现谷歌翻译ApI 免费版 C#发布和调试WebService ajax调用WebService实现数据库操作 C# 实体类转json数据过滤掉字段为null的字段
ASP.NET实现二维码 using System;using System.Collections.Generic;using System.Drawing;using System.Linq;us ...
- Jquery ajax调用webservice总结
jquery ajax调用webservice(C#)要注意的几个事项: 1.web.config里需要配置2个地方 <httpHandlers> <remove verb ...
- Ajax调用WebService
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1 ...
- Ajax调用WebService（一）
Ajax调用WebService(一) http://www.cnblogs.com/leslies2/archive/2011/01/26/1934889.html 分类: Ajax 使用技术 We ...
- Jquery Ajax 调用 WebService
原文:http://www.cnblogs.com/andiki/archive/2010/05/17/1737254.html jquery ajax调用webservice(C#)要注意的几个事项 ...
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
原文:Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇) 老话说的好:好记心不如烂笔头! 本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的 ...
- 使用ajax调用webservice加载table
写了个ajax调用webservice动态加载表格的案例 不废话直接上代码 webservice代码: /// <summary> /// 首页显示会员信息 /// </summar ...
- ajax调用webservice服务
ajax调用是 html方向调用的, 而sqlconnection是 java代码调用的,本质差不多 <html> <head> <title>通过ajax调用we ...
随机推荐
- wex5 教程之 图文讲解 文件上传attachmentSimple（1）
视频教程地址:http://v.youku.com/v_show/id_XMTc4NDAyMTY4OA==.html 效果预览: 1 调用attchmentSimple组件,打开文件管理器,并选中,显 ...
- Dynamics AX 2012 R3 Demo 安装与配置 - 安装数据服务器、AOS和客户端 (Step 2)
上一节中,Reinhard主要讲解了怎么配置安装环境,尤其是域控制器,并在域中添加了一个管理员账户 MSDynAX.NET\Reinhard ,以后的安装配置,均在该账户下进行. 现在运行 AX 20 ...
- Create Your Tab and LayerTabMenu In Katana
感谢 http://tool.lu/pyc/ 这个牛逼的网站能反编译pyc...他妈的Katana太他妈无耻了,竟然不让自定义加Node Tab Content....只能反编译他的东西了... 研究 ...
- 控制边框颜色：《CSS3 Border-color》
CSS3中有关于Border的属性一共有三个:圆角border-radius,图片边框border-images,边框多颜色border-color,其中圆角border-radius是常用的一个属性 ...
- CSS 盒子模型概述
一.简介 CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成. 盒子模型,最里面的部分是实际内容:直接包围内 ...
- HTML标签的应用（新手）
雪碧图(精灵图): sprite compass-合并(尽量宽高相同) 兼容性: 1.resct重置技术:normalize技术 2.加前缀:-webkit- -moz- -0- -ms- 3.< ...
- JavaWeb学习总结_Servlet开发
一. Servlet简介 二.Servlet的运行过程 Servlet程序是由Web服务器调用,web服务器收到客户端的Servlet访问请求后: WEB服务器首先检查是否已经装载并创建了该Servl ...
- C# 使用lock关键字lock不同的对象
c# lock关键字的本质 是调用Monitor.Enter(object obj)并且在finally的时候调用Monitor.Exit(obj) 在obj是不同数据类型的时候会出现不同的情况 1. ...
- 《BI那点儿事》Cube的存储
关系 OLAP (ROLAP)ROLAP的基本数据和聚合数据均存放在关系数据库中:ROLAP 存储模式使得分区的聚合存储在关系数据库的表(在分区数据源中指定)中.但是,可为分区数据使用 ROLAP 存 ...
- wenti
No apport report written because MaxReports is reached already ...