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 ...
随机推荐
- quick lua 3.3常用方法和学习技巧之transition.lua
transition.lua主要是动作相关的操作. -------------------------------- -- @module transition --[[-- 为图像创造效果 ]] l ...
- CMD执行BCP命令
C:\>BCP "EXEC GetU '2016-7-11' ,'-1'" queryout "C:\\C3Marketing\SummaryReport_test ...
- jQuery验证元素是否为空的两种常用方法
这篇文章主要介绍了jQuery验证元素是否为空的两种常用方法,实例分析了两种常用的判断为空技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery验证元素是否为空的两种常用方法.分享给 ...
- GZFramework.DB.Core初始化
单数据库初始化,以MSSQL为例 public class DBConfig : IDBConfig { public static void InitDB() { GZFramework.DB.Co ...
- HTML的基本认识
就目前学的HTML,感受最深的就是很多标签.HTML不怎么需要逻辑,只需记忆大量标签.不懂的可以参照W3C的文档.里面有很多学习的东西,很受用. 关于CSS基础: 基本选择器: 1.标签选择器 ...
- postMessage
postMessage 父页面 e.target.contentWindow.postMessage(messageData, '*'); /*******onMessage处理******/ fun ...
- mysql5.x(<7) sql文件导入到5.7
一.修改sql—model http://www.linuxidc.com/Linux/2016-09/135372.htm
- [css] CSS相对定位|绝对定位
第一篇链接:http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A% ...
- Deep Learning 6_深度学习UFLDL教程：Softmax Regression_Exercise（斯坦福大学深度学习教程）
前言 练习内容:Exercise:Softmax Regression.完成MNIST手写数字数据库中手写数字的识别,即:用6万个已标注数据(即:6万张28*28的图像块(patches)),作训练数 ...
- Http-Only Cookie
设置Cookie的时候,如果服务器加上了HttpOnly属性,则这个Cookie无法被JavaScript读取(即document.cookie不会返回这个Cookie的值),只用于向服务器发送. S ...