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 ...
随机推荐
- python核心编程学习记录之错误与异常
- WPF:基础知识
WPF:1.数据驱动 2.UI定义与运行逻辑分离 一. 1.编译 /t:exe 命令行程序:/t:winexe 图形用户界面程序:/t:library 动态链接库 2.启动 1)编译后生成的App.g ...
- RSA算法基础详解
. 首页 博客园 联系我 前言:在RSA诞生之前. RSA算法. 质数与互质数. 模运算. 同余. 欧拉函数. 欧拉定理与模反元素. 真实的例子. 计算密钥. 密钥组成与加解密公式. 安全性. 一点感 ...
- Script循环语句 的相关知识跟练习
循环语句有两种问题类型:穷举和迭代 穷举: 在不知道什么情况下才是我们需要的结果的时候,只能让它一个一个的都执行一遍 迭代:在现有的条件下,根据规律,不断求解中间情况,最终推选出结果 两个关键词 br ...
- 10-JS数组
数组的定义和创建 数组是值得有序集合.JavaScript数组是无类型的. 数组对象的作用是:使用单独的变量名来存储一系列的值. 数组的创建 有两种向数组赋值的方法(你可以添加任意多的值,就像你可以定 ...
- How to generate a random number in R
Generate a random number between 5.0 and 7.5x1 <- runif(1, 5.0, 7.5) # 参数1表示产生一个随机数x2 <- runif ...
- C#MVC使用二进制流显示图片
关于显示图片的最好方法当然是img 的src直接指向地址,简单实用.但是有时候也会使用到使用图片流显示图片的方法.实现也比较简单(在C# mvc中,java的不了解).具体如下: 1.前台cshtml ...
- IE浏览器bug罪魁祸首--hasLayout
IE浏览器一直都是前端程序员最头疼的,IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念. 认识hasLayout--haslayout是Windows In ...
- C#中的多线程 - 基础知识
原文:http://www.albahari.com/threading/ 文章来源:http://blog.gkarch.com/threading/part1.html 1简介及概念 C# 支持通 ...
- wampserver You don't have permission to access / on this server. 解决 方法(转，正好碰到这样的事情了就转下来)
最近在安装最近版wampserver 2.2 d时发现安装好后启动服务器,访问localhost显示You don't have permission to access / on this serv ...