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 instanceof 与typeof使用说明
Jan 11 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 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与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php jsonp单引号转义
2014/11/23 PHP
php单例模式的简单实现方法
2016/06/10 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
vue实现评论列表功能
2019/10/25 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
如何运行Python程序的方法
2013/04/21 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
Python 爬虫的原理
2020/07/30 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
写给导师的自荐信
2015/03/06 职场文书