JQuery调用WebServices的方法和4个实例
更新时间：2014年05月06日 08:49:08 作者：
你是不是经常作这种开发，前端用JS写逻辑，后端用aspx或者ashx作服务？你是不是经常在请求aspx的时候在查询字符串中拼接诸如a.aspx?method=getDepartmetn¶m1=1¶m2=2的字符串？
你甚至为每个ajax请求添加一个后端页面！
你是不是甚至在想，尼玛，要是能够直接调用C#类文件中的方法就爽了？！（这里FishLi做了一个框架，有兴趣可以去看看）
可是，你大概忘记了，我们是程序员，我们是懒惰的，我们要让电脑给我们干更多的事情！（这里装装13），但其实，微软和JQuery大牛们早帮我们解决了这个小问题。
大致的调用分为以下几种：
一、无参数 有返回值的调用
前端JS代码:
复制代码 代码如下:
$("#btn1").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CalledByJquery.asmx/HelloWorld",
data: "{}",
dataType: "json",
success: function(json) { alert(json.d); },
error: function(error) {
alert("调用出错" + error.responseText);
}
});
});
后端WebMethod代码：
复制代码 代码如下:
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
用谷歌调试的结果：
二、简单参数 简单返回值的调用
前端JS代码：
复制代码 代码如下:
$("#btn2").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CalledByJquery.asmx/SimpleReturns",
data: "{name:'张三'}",
dataType: "json",
success: function(json) { alert(json.d); },
error: function(error) {
alert("调用出错" + error.responseText);
}
});
});
后端WebMethod代码：
复制代码 代码如下:
[WebMethod]
public string SimpleReturns(string name)
{
return String.Format("您的姓名是{0}", name);
}
用谷歌调试的结果：
三、 复杂参数 复杂返回值的调用
前端JS代码：
复制代码 代码如下:
$("#btn3").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CalledByJquery.asmx/GetStudentList",
data: "{stu:{ID:'6',Name:'ff'}}",
dataType: "json",
success: function(json) { alert(json.d); },
error: function(error) {
alert("调用出错" + error.responseText);
}
});
});
后端WebMethod：
复制代码 代码如下:
[WebMethod]
public List<Student> GetStudentList(Student stu)
{
List<Student> studentList = new List<Student>
{
new Student{ID=1,Name="张三"},
new Student{ID=2,Name="李四"}
};
//把从客户端传来的实体放回到返回值中
studentList.Add(stu);
return studentList;
}
用谷歌调试的结果：
四、返回匿名对象的WebMethod的调用
前端JS代码：
复制代码 代码如下:
$("#btn4").click(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CalledByJquery.asmx/ReturnNoNameClass",
data: "{}",
dataType: "json",
success: function(json) { alert(json.d); },
error: function(error) {
alert("调用出错" + error.responseText);
}
});
});
后端WebMethod代码：
复制代码 代码如下:
[WebMethod]
public object ReturnNoNameClass()
{
return new { ID = 1, Name = "张三" };
}
用谷歌调试的结果：
哈哈，到这里，你是不是也觉得so easy,妈妈再也不用担心我的学习了，其实很多东西都很简单，但没人告诉我们，而我们自己在实际开发中又没有这种需求，所以给我们的开发造成了一定的障碍，
所以，交流啊，是多么滴重要！
相关文章
jQuery使用after()方法在元素后面添加多项内容的方法
这篇文章主要介绍了jQuery使用after()方法在元素后面添加多项内容的方法,实例分析了jQuery中after方法的功能及在元素后面添加内容的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了validform表单验证的实现方法，validform插件主要把所有的验证条件和验证提示信息绑定到每个表单元素，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-03-03
iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，今天我们就来分享2种使用jquery实现iframe自适应高度的代码2014-06-06
这篇文章主要介绍了jQuery表单选择器用法以及相关知识点内容，有兴趣的朋友们可以学习下。2019-08-08
jQuery Mobile的loading对话框显示/隐藏方法分享
jQuery Mobile提供两个方法，使得开发者在编写JavaScript业务编辑时，可以随意的控制loading提示框2013-11-11
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
很多人熟悉使用锚链接跳转到的页面部分的解决方案,这种效果当需要列出很长的数据集时，是非常实用的,然而页面跳转对于游客来说有时候并不是好友好，弊端我就不多说了，祥看下本文2013-02-02
这篇文章主要为大家详细介绍了jquery实现淡入淡出轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
jQuery 隔行换色 支持键盘上下键，按Enter选定值2009-08-08
本篇文章主要介绍了Jquery-data的三种用法。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了jQuery超简单遮罩层实现方法,结合实例形式详细分析了jQuery遮罩层相关属性样式动态控制操作技巧,需要的朋友可以参考下2018-09-09
最新评论