利用JQuery直接调用asp.net后台的简单方法


Posted in Javascript onOctober 27, 2016

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

[WebMethod]   命名空间

1、无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod]的声明

后台<C#>:

using System.Web.Script.Services; 
 
[WebMethod] 
public static string SayHello() 
{ 
   return "Hello
 Ajax!"; 
}

前台<jQuery>:

$(function()
 {  
  $("#btnOK").click(function()
 {  
    $.ajax({ 
      //要用post方式 
      type:
"Post", 
      //方法所在页面和方法名 
      url:
"data.aspx/SayHello", 
      contentType:
"application/json;
 charset=utf-8", 
      dataType:
"json", 
      success:
function(data)
 {  
        //返回的数据用data.d获取内容 
        alert(data.d); 
      }, 
      error:
function(err)
 {  
        alert(err); 
      } 
    }); 
 
    //禁用按钮的提交 
    return false; 
  }); 
});

2、带参数的方法调用

后台<C#>:

using System.Web.Script.Services;
 
[WebMethod]
public static string GetStr(string str,
string str2)
{
  return str
 + str2;
}

前台<JQuery>:

$(function()
 {  
  $("#btnOK").click(function()
 {  
    $.ajax({ 
      type:
"Post", 
      url:
"data.aspx/GetStr", 
      //方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字 
      data:
"{'str':'我是','str2':'XXX'}", 
      contentType:
"application/json;
 charset=utf-8", 
      dataType:
"json", 
      success:
function(data)
 {  
        //返回的数据用data.d获取内容 
         alert(data.d); 
      }, 
      error:
function(err)
 {  
        alert(err); 
      } 
    }); 
 
    //禁用按钮的提交 
    return false; 
  }); 
});

3、返回数组方法的调用

后台<C#>:

using System.Web.Script.Services;
 
[WebMethod]
public static List<string>
 GetArray()
{
  List<string>
 li = new List<string>();
 
  for (int i
 = 0; i < 10; i++)
    li.Add(i
 + "");
 
  return li;
}

前台<JQuery>:

$(function()
 {  
  $("#btnOK").click(function()
 {  
    $.ajax({ 
      type:
"Post", 
      url:
"data.aspx/GetArray", 
      contentType:
"application/json;
 charset=utf-8", 
      dataType:
"json", 
      success:
function(data)
 {  
        //插入前先清空ul 
        $("#list").html(""); 
 
        //递归获取数据 
        $(data.d).each(function()
 {  
          //插入结果到li里面 
          $("#list").append("<li>" +
this +
"</li>"); 
        }); 
 
        alert(data.d); 
      }, 
      error:
function(err)
 {  
        alert(err); 
      } 
    }); 
 
    //禁用按钮的提交 
    return false; 
  }); 
});
///
 <reference path="jquery-1.4.2-vsdoc.js"/>
$(function()
 {
  $("#btnOK").click(function()
 {
    $.ajax({
      type:
"Post",
      url:
"data.aspx/GetArray",
      contentType:
"application/json;
 charset=utf-8",
      dataType:
"json",
      success:
function(data)
 {
        //插入前先清空ul
        $("#list").html("");
 
        //递归获取数据
        $(data.d).each(function()
 {
          //插入结果到li里面
          $("#list").append("<li>" +
this +
"</li>");
        });
 
        alert(data.d);
      },
      error:
function(err)
 {
        alert(err);
      }
    });
 
    //禁用按钮的提交
    return false;
  });
});

4、返回Hashtable方法的调用

后台<C#>:

using System.Web.Script.Services;
using System.Collections;
 
[WebMethod]
public static Hashtable
 GetHash(string key,string value)
{
  Hashtable
 hs = new Hashtable();
 
  hs.Add("www",
"yahooooooo");
  hs.Add(key,
 value);
   
  return hs;
}

前台<JQuery>:

$(function()
 {  
  $("#btnOK").click(function()
 {  
    $.ajax({ 
      type:
"Post", 
      url:
"data.aspx/GetHash", 
      //记得加双引号
 T_T  
      data:
"{
 'key': 'haha', 'value': '哈哈!' }", 
      contentType:
"application/json;
 charset=utf-8", 
      dataType:
"json", 
      success:
function(data)
 {  
        alert("key:
 haha ==> "+data.d["haha"]+"\n
 key: www ==> "+data.d["www"]); 
      }, 
      error:
function(err)
 {  
        alert(err
 + "err"); 
      } 
    }); 
 
    //禁用按钮的提交 
    return false; 
  }); 
});

5、操作xml

XMLtest.xml:
 
view
 plaincopy to clipboardprint?
<?xml version="1.0"
 encoding="utf-8" ?> 
<data>
<item>
  <id>1</id>
  <name>qwe</name>
</item>
<item>
  <id>2</id>
  <name>asd</name>
</item>
</data>
<?xml version="1.0"
 encoding="utf-8" ?>
<data>
<item>
  <id>1</id>
  <name>qwe</name>
</item>
<item>
  <id>2</id>
  <name>asd</name>
</item>
</data>

前台<JQuery>:

$(function()
 {  
  $("#btnOK").click(function()
 {  
    $.ajax({ 
      url:
"XMLtest.xml", 
      dataType:
'xml',
//返回的类型为XML
 ,和前面的Json,不一样了  
      success:
function(xml)
 {  
        //清空list 
        $("#list").html(""); 
        //查找xml元素
        $(xml).find("data>item").each(function()
 {  
          $("#list").append("<li>id:" +
 $(this).find("id").text()
 +"</li>"); 
          $("#list").append("<li>Name:"+
 $(this).find("name").text()
 + "</li>"); 
        }) 
      }, 
      error:
function(result,
 status) { //如果没有上面的捕获出错会执行这里的回调函数 
        alert(status); 
      } 
    }); 
 
    //禁用按钮的提交 
    return false; 
  }); 
});

以上就是小编为大家带来的利用JQuery直接调用asp.net后台的简单方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
小程序实现tab标签页
Nov 16 Javascript
JavaScript登录验证码的实现
Oct 27 #Javascript
微信小程序  自定义创建详细介绍
Oct 27 #Javascript
vue中渐进过渡效果实现
Oct 27 #Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 #Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 #Javascript
vue的props实现子组件随父组件一起变化
Oct 27 #Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 #Javascript
You might like
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php远程下载类分享
2016/04/13 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
Python实现的tab文件操作类分享
2014/11/20 Python
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
python实现聚类算法原理
2018/02/12 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
英语专业推荐信
2013/11/16 职场文书
英文自荐信
2013/12/19 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
金砖之国观后感
2015/06/11 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android