JQuery调用WebServices的方法和4个实例


Posted in Javascript onMay 06, 2014

你甚至为每个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";
}

用谷歌调试的结果:
JQuery调用WebServices的方法和4个实例

二、简单参数 简单返回值的调用

前端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);
        }

用谷歌调试的结果:

JQuery调用WebServices的方法和4个实例
三、 复杂参数 复杂返回值的调用
前端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;
        }

用谷歌调试的结果:

JQuery调用WebServices的方法和4个实例
四、返回匿名对象的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 = "张三" };
        }

用谷歌调试的结果:

JQuery调用WebServices的方法和4个实例

哈哈,到这里,你是不是也觉得so easy,妈妈再也不用担心我的学习了,其实很多东西都很简单,但没人告诉我们,而我们自己在实际开发中又没有这种需求,所以给我们的开发造成了一定的障碍,
所以,交流啊,是多么滴重要!

Javascript 相关文章推荐
浅谈Javascript事件模拟
Jun 27 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 #Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 #Javascript
使用jQuery重置(reset)表单的方法
May 05 #Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 #Javascript
Js操作树节点自动折叠展开的几种方法
May 05 #Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 #Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 #Javascript
You might like
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
Python装饰器的函数式编程详解
2015/02/27 Python
python 异常处理总结
2016/10/18 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
员工培训邀请函
2014/02/02 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
学党史心得体会
2014/09/05 职场文书
初中学习计划书范文
2014/09/15 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
村干部任职承诺书
2015/01/21 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers