欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery AJax调用asp.net webservers的实现代码

程序员文章站 2024-03-08 16:20:42
aspx页面代码 复制代码 代码如下:
aspx页面代码
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
　<title></title>
　　<script src="jquery.js" type="text/javascript"></script>
　　<style type="text/css"><!--
.hover
{
cursor: pointer; /*小手*/
background: #ffc; /*背景*/
}
.button
{
width: 150px;
float: left;
text-align: center;
margin: 10px;
padding: 10px;
border: 1px solid #888;
}
#dictionary
{
text-align: center;
font-size: 18px;
clear: both;
border-top: 3px solid #888;
}
#loading
{
border: 1px #000 solid;
background-color: #eee;
padding: 20px;
margin: 100px 0 0 200px;
position: absolute;
display: none;
}
　　
--></style><style type="text/css" bogus="1"><!--
.hover
{
cursor: pointer; /*小手*/
background: #ffc; /*背景*/
}
.button
{
width: 150px;
float: left;
text-align: center;
margin: 10px;
padding: 10px;
border: 1px solid #888;
}
#dictionary
{
text-align: center;
font-size: 18px;
clear: both;
border-top: 3px solid #888;
}
#loading
{
border: 1px #000 solid;
background-color: #eee;
padding: 20px;
margin: 100px 0 0 200px;
position: absolute;
display: none;
}
　　
--></style><style type="text/css" bogus="1" bogus="1">.hover
{
cursor: pointer; /*小手*/
background: #ffc; /*背景*/
}
.button
{
width: 150px;
float: left;
text-align: center;
margin: 10px;
padding: 10px;
border: 1px solid #888;
}
#dictionary
{
text-align: center;
font-size: 18px;
clear: both;
border-top: 3px solid #888;
}
#loading
{
border: 1px #000 solid;
background-color: #eee;
padding: 20px;
margin: 100px 0 0 200px;
position: absolute;
display: none;
}
　　</style>
　　<script type="text/javascript"><!--
　　　　//无参数调用
　　　　$(document).ready(function() {
　　　　　　$('#btn1').click(function() {
　　　　　　　　$.ajax({
　　　　　　　　　　type: "post",　 //访问webservice使用post方式请求
　　　　　　　　　　contenttype: "application/json", //webservice 会返回json类型
　　　　　　　　　　url: "webservice1.asmx/helloworld", //调用webservice的地址和方法名称组合 ---- wsurl/方法名
　　　　　　　　　　data: "{}",　　　　 //这里是要传递的参数，格式为 data: "{paraname:paravalue}",下面将会看到　　　
　　　　　　　　　　datatype: 'json',
　　　　　　　　　　success: function(result) {　　 //回调函数，result，返回值
　　　　　　　　　　　　$('#dictionary').append(result.d);
　　　　　　　　　　}
　　　　　　　　});
　　　　　　});
　　　　});
　　　　//有参数调用
　　　　$(document).ready(function() {
　　　　　　$("#btn2").click(function() {
　　　　　　　　$.ajax({
　　　　　　　　　　type: "post",
　　　　　　　　　　contenttype: "application/json",
　　　　　　　　　　url: "webservice1.asmx/getwish",
　　　　　　　　　　data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}",
　　　　　　　　　　datatype: 'json',
　　　　　　　　　　success: function(result) {
　　　　　　　　　　　　$('#dictionary').append(result.d);
　　　　　　　　　　}
　　　　　　　　});
　　　　　　});
　　　　});
　　　　
　　　　
　　　　//返回集合（引用自网络，很说明问题）
　　　　$(document).ready(function() {
　　　　　　$("#btn3").click(function() {
　　　　　　　　$.ajax({
　　　　　　　　　　type: "post",
　　　　　　　　　　contenttype: "application/json",
　　　　　　　　　　url: "webservice1.asmx/getarray",
　　　　　　　　　　data: "{i:10}",
　　　　　　　　　　datatype: 'json',
　　　　　　　　　　success: function(result) {
　　　　　　　　　　　　$(result.d).each(function() {
　　　　　　　　　　　　　　//alert(this);
　　　　　　　　　　　　　　$('#dictionary').append(this.tostring() + " ");
　　　　　　　　　　　　　　//alert(result.d.join(" | "));
　　　　　　　　　　　　});
　　　　　　　　　　}
　　　　　　　　});
　　　　　　});
　　　　});
　　　　//返回复合类型
　　　　$(document).ready(function() {
　　　　　　$('#btn4').click(function() {
　　　　　　　　$.ajax({
　　　　　　　　　　type: "post",
　　　　　　　　　　contenttype: "application/json",
　　　　　　　　　　url: "webservice1.asmx/getclass",
　　　　　　　　　　data: "{}",
　　　　　　　　　　datatype: 'json',
　　　　　　　　　　success: function(result) {
　　　　　　　　　　　　$(result.d).each(function() {
　　　　　　　　　　　　　　//alert(this);
　　　　　　　　　　　　　　$('#dictionary').append(this['id'] + " " + this['value']);
　　　　　　　　　　　　　　//alert(result.d.join(" | "));
　　　　　　　　　　　　});
　　　　　　　　　　}
　　　　　　　　});
　　　　　　});
　　　　});
　　　　//返回dataset(xml)
　　　　$(document).ready(function() {
　　　　　　$('#btn5').click(function() {
　　　　　　　　$.ajax({
　　　　　　　　　　type: "post",
　　　　　　　　　　url: "webservice1.asmx/getdataset",
　　　　　　　　　　data: "{}",
　　　　　　　　　　datatype: 'xml', //返回的类型为xml ，和前面的json，不一样了
　　　　　　　　　　success: function(result) {
　　　　　　　　　　//演示一下捕获
　　　　　　　　　　　　try {　
　　　　　　　　　　　　　　$(result).find("table1").each(function() {
　　　　　　　　　　　　　　　　$('#dictionary').append($(this).find("id").text() + " " + $(this).find("value").text());
　　　　　　　　　　　　　　});
　　　　　　　　　　　　}
　　　　　　　　　　　　catch (e) {
　　　　　　　　　　　　　　alert(e);
　　　　　　　　　　　　　　return;
　　　　　　　　　　　　}
　　　　　　　　　　},
　　　　　　　　　　error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
　　　　　　　　　　　　if (status == 'error') {
　　　　　　　　　　　　　　alert(status);
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　});
　　　　　　});
　　　　});
　　　　//ajax 为用户提供反馈，利用ajaxstart和ajaxstop 方法，演示ajax跟踪相关事件的回调，他们两个方法可以添加给jquery对象在ajax前后回调
　　　　//但对与ajax的监控，本身是全局性的
　　　　$(document).ready(function() {
　　　　　　$('#loading').ajaxstart(function() {
　　　　　　　　$(this).show();
　　　　　　}).ajaxstop(function() {
　　　　　　　　$(this).hide();
　　　　　　});
　　　　});
　　　　// 鼠标移入移出效果，多个元素的时候，可以使用“，”隔开
　　　　$(document).ready(function() {
　　　　　　$('div.button').hover(function() {
　　　　　　　　$(this).addclass('hover');
　　　　　　}, function() {
　　　　　　　　$(this).removeclass('hover');
　　　　　　});
　　　　});
　　　　
　　　　
　　
// --></script>
</head>
<body>
　　<form id="form1" runat="server">
　　<div id="switcher">
　　　　<h2>
　　　　　　jquery 的webservices 调用</h2>
　　　　<div class="button" id="btn1">
　　　　　　helloworld</div>
　　　　<div class="button" id="btn2">
　　　　　　传入参数</div>
　　　　<div class="button" id="btn3">
　　　　　　返回集合</div>
　　　　<div class="button" id="btn4">
　　　　　　返回复合类型</div>
　　　　<div class="button" id="btn5">
　　　　　　返回dataset(xml)</div>
　　</div>
　　<div id="loading">
　　　　服务器处理中，请稍后。
　　</div>
　　<div id="dictionary">
　　</div>
　　</form>
</body>
</html>

webservice1.asmx 代码
复制代码 代码如下:

using system;
using system.collections;
using system.componentmodel;
using system.data;
using system.linq;
using system.web;
using system.web.services;
using system.web.services.protocols;
using system.xml.linq;
using system.collections.generic;
namespace jquery_learning
{
/// <summary>
/// webservice1 的摘要说明
/// </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 webservice1 : system.web.services.webservice
{
/// <summary>
/// 无参数
/// </summary>
/// <returns></returns>
[webmethod]
public string helloworld()
{
return "hello world ";
}
/// <summary>
/// 带参数
/// </summary>
/// <param name="value1"></param>
/// <param name="value2"></param>
/// <param name="value3"></param>
/// <param name="value4"></param>
/// <returns></returns>
[webmethod]
public string getwish(string value1, string value2, string value3, int value4)
{
return string.format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);
}
/// <summary>
/// 返回集合
/// </summary>
/// <param name="i"></param>
/// <returns></returns>
[webmethod]
public list<int> getarray(int i)
{
list<int> list = new list<int>();
while (i >= 0)
{
list.add(i--);
}
return list;
}
/// <summary>
/// 返回一个复合类型
/// </summary>
/// <returns></returns>
[webmethod]
public class1 getclass()
{
return new class1 { id = "1", value = "牛年大吉" };
}
/// <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"] = "1";
dr["value"] = "新年快乐";
dt.rows.add(dr);
dr = dt.newrow();
dr["id"] = "2";
dr["value"] = "万事如意";
dt.rows.add(dr);
ds.tables.add(dt);
return ds;
}
}
//自定义的类，只有两个属性
public class class1
{
public string id { get; set; }
public string value { get; set; }
}
}

上一篇： 删除PHP数组中头部、尾部、任意元素的实现代码

下一篇： 通过PL/SQL创建序列和触发器实现表自增字段

推荐阅读