您好,欢迎访问一九零五行业门户网

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

你甚至为每个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 getstudentlist(student stu)
        {
            list studentlist = new list
            {
                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,妈妈再也不用担心我的学习了,其实很多东西都很简单,但没人告诉我们,而我们自己在实际开发中又没有这种需求,所以给我们的开发造成了一定的障碍,
所以,交流啊,是多么滴重要!
其它类似信息

推荐信息