一说到开始,我们当然需要项目。

首先,创建一个Asp.net Web 应用,然后新增一个名称为“Web 服务”的文件,也就是后缀名为".asmx"的文件,然后需要进行配置一下,在Web.Config中加入如下配置节点:

在HttpHandlers节点中,需要注册:

<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

然后需要在System.Web下注册WebServices节点:

<webServices>
      <protocols>
        <add name="HttpSoap"/>
        <add name="HttpPost"/>
        <add name="HttpGet"/>
        <add name="Documentation"/>
      </protocols>
    </webServices>

配置完毕后,下面开始进行具体的讲解。
1.利用Get方式进行数据读写操作

首先,前台,我们代码如下:

        $(document).ready(function () {
            $("#Button1").click(function () {
                $.ajax({
                    url: "Ajax/WebService1.asmx/HelloWorld",
                    type: "get",
                    data: "name=John&location=Boston",
                    success: function (result) {
                        $("#test").html(result.text);
                    },
                    error: function (data) {
                        alert(data.value);
                    }
                });
            });
        });

后台,我们的代码如下:

using System.Web.Services;
using System.Threading;

namespace Nxt.Web.Ajax
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            Thread.Sleep();
            return this.Context.Request.QueryString["name"];
        }
    }
}

得到的结果如我们预料,服务器端返回了“John”。

2.利用Post方式进行数据读写操作。

首先是前端代码:

  $(document).ready(function () {
            $("#Button1").click(function () {
                $.ajax({
                    url: "Ajax/WebService2.asmx/HelloWorld",
                    type: "post",
                    contentType: "application/json",  //from backend
                    dataType: "json",  // send to backend
                    data: '{"name":"test"}',
                    success: function (result) {
                        $("#test").html(result.d);
                    },
                    error: function (data) {
                        //alert(data.value);
                    }
                });
            });
        });

然后是后端的处理过程,在前端代码中,我们可以看到,我们通过contentType: "application/json",表明后台传送到前台的是JSON格式的数据。 而通过dataType: "json",则表明我们往后端传送的也是json类型的数据。

using System.Web.Services;
using System.Threading;

namespace Nxt.Web.Ajax
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class WebService2 : System.Web.Services.WebService
    {
        [WebMethod]
        public string HelloWorld(string name)
        {
            Thread.Sleep();
            return name;
        }
    }
}

这样,我们通过Post方式得到了预期的结果。
这里我需要特别说明的是,当用json数据当做参数通过Post方式传入后台的时候,后台的参数名称可以与前台保持一致。

那么我们后台取值的时候,直接把参数拿过来用就行了。在例子里,我的json数据为:{"name":"test"},那么在后台,我需要获取的值,就保存在了参数 string name中了。

直接拿过来用就行了。

3.直接操作后台返回的List对象

前台代码如下:

 $(document).ready(function () {
            $("#Button1").click(function () {
                $.ajax({
                    url: "Ajax/WebService2.asmx/GetList",
                    type: "post",
                    contentType: "application/json",  //from backend
                    dataType: "json",  // send to backend
                    data: '{"i":"10"}',
                    success: function (result) {
                        $(result.d).each(function (value) {
                            $("#test").append(this.toString()+" ");
                        });
                    },
                    error: function (data) {
                        //alert(data.value);
                    }
                });
            });
        });

后台代码如下:

        [WebMethod]
        public List<int> GetList(int i)
        {
            List<int> list = new List<int>();
            do{
                list.Add(i);
                i--;
            });
            return list;
        }

最后,屏幕上打印出了我们需要的数据: 10 9 8 7 6 5 4 3 2 1。

4.直接操作后台返回类对象

前台:

 $(document).ready(function () {
            $("#Button1").click(function () {
                $.ajax({
                    url: "Ajax/WebService2.asmx/GetModel",
                    type: "post",
                    contentType: "application/json",  //from backend
                    dataType: "json",  // send to backend
                    data: '{}',
                    success: function (result) {
                        $(result.d).each(function (value) {
                            debugger;
                            $("#test").append(this["UserID"].toString() + " " + this["UserName"].toString() + " " + this["UserAddr"].toString());
                        });
                    },
                    error: function (data) {
                        debugger;
                        //alert(data.value);
                    }
                });
            });
        });

后台代码:

 [WebMethod]
        public Common.TestModel GetModel()
        {
            , UserName = "nxt", UserAddr = "beijing" };
        }

5.直接操作返回的dataset数据集

前端代码:

$(document).ready(function () {
            $("#Button1").click(function () {
                $.ajax({
                    url: "Ajax/WebService2.asmx/GetDataSet",
                    type: "post",
                    dataType: "xml",  // send to backend
                    data: '{}',
                    success: function (result) {
                        try {
                            $(result).find("Table1").each(function () {
                                $("#test").append($(this).find("ID").text() + " " + $(this).find("Value").text());
                            });
                        }
                        catch (e) {
                            alert(e);
                            return;
                        }
                    },
                    error: function (data) {
                        //alert(data.value);
                    }
                });
            });
        });

后端代码:

        [WebMethod]
        public DataSet GetDataSet()
        {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            dt.Columns.Add("ID", Type.GetType("System.String"));
            dt.Columns.Add("Value", Type.GetType("System.String"));
            DataRow dr = dt.NewRow();
            dr["ID"] = "scy";
            dr["Value"] = "河南理工大学";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "scy1";
            dr["Value"] = "河南理工大学1";
            dt.Rows.Add(dr);
            ds.Tables.Add(dt);
            return ds;
        }

得到的结果是:scy 河南理工大学scy1 河南理工大学1

符合预期。

最后加一个loading效果的特效,以便备忘:

    <style type="text/css">
      #loading
        {
          position:absolute;
          top:50%;
          left:50%;
        }
    </style>
 $(document).ready(function () {
            $('#loading').ajaxStart(function () {
                $(this).html("<img src='Images/loading.gif'>").show();
            }).ajaxStop(function () {
                $(this).hide();
            });
        });

Asp.net通过Jquery操作WebService进行Ajax读写的更多相关文章

  1. ASP.net jQuery调用webservice返回json数据的一些问题

    之前寒假时,试着使用jQuery写了几个异步请求demo, 但是那样是使用的webform普通页面,一般应该是用 webservice 居多. 最近写后台管理时,想用异步来实现一些信息的展示和修改, ...

  2. jquery操作ajax返回的页面元素

    这两天工作不忙,正好从朋友那里拿到一个某个应用的开发文档,相关数据放在了mongodb里,自己电脑可以本地开启服务器然后通过给的借口来获取数据.由于这是一个比较大比较全的一个完整项目,也没有那么多经历 ...

  3. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  4. 如何构建ASP.NET MVC4&amp;JQuery&amp;AJax&amp;JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

  5. json数据的jquery操作和asp.net后台操作

    jquery操作 json对象创建 var item0={"a":"val1","b":"val2"}; json对象字 ...

  6. jQuery入门(2)使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  7. jQuery调用WebService实现增删改查的实现

    第一篇博客,发下我自己写的jQuery调用WebService实现增删改查的实现. 1 <!DOCTYPE html> 2 3 <html xmlns="http://ww ...

  8. Jquery调用Webservice传递Json数组

    Jquery由于提供的$.ajax强大方法,使得其调用webservice实现异步变得简单起来,可以在页面上传递Json字符串到Webservice中,Webservice方法进行业务处理后,返回Js ...

  9. 通过jQuery或ScriptManager以Ajax方式访问服务

    1.客户端和服务端 服务端对外提供服务时,可以通过handler或者webservice.handler比较轻便,但是难以对外公开,只有程序员自己知道它到底做了些什么工作.webservice可以将服 ...

随机推荐

  1. iOS中编写单例类的心得

    单例 1.认识过的单例类有哪些: NSUserDefaults.NSNotificationCenter.NSFileManager.UIApplication 2.单例类 单例类某个类在代码编写时使 ...

  2. 【转】Eclipse 常用快捷键 (动画讲解)

    Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 小坦克我花了一整天时间, 精选了一些常用的快捷键操作,并且精心录制了动画, 让你一看就会. ...

  3. delphi中获取调用堆栈信息

    异常堆栈有利于分析程序的错误,Delphi的Exception有StackTrace属性,但是值为空,因为StackTrace的信息收集Delphi委托给了第三方组件来完成,真是脑子有毛病! 借助于m ...

  4. Java:对象的序列化

    一.对象序列化机制 序列化机制允许将实现序列化的Java对象转换为字节序列,这些字节序列可以被保存在磁盘上或通过网络传输,以备以后重新恢复原来的对象: 序列化机制使得对象可以脱离程序的运行而独立存在: ...

  5. Oracle 插入超4000字节的CLOB字段的处理方法

    最近在做系统开发的时候需要想Oracle数据库插入超过4000字节的CLOB字段,在网上查询了N久才发现下面的解决方案,故留存以备后查. 我们可以通过创建单独的OracleCommand来进行指定的插 ...

  6. 阿里安卓面试分析: Android应用的闪退(crash)问题跟踪和解析

    一:问题描述    闪退(Crash)是客户端程序在运行时遭遇无法处理的异常或错误时而退出应用程序的表现,请从crash发生的原因分类与解决方法.在出现crash后如何捕捉并分析异常这两个问题给出自己 ...

  7. V4L2驱动的移植与应用(三)

    三.V4L2的demo capture.c是官方示例程序. capture.c 程序中的 process_image 函数: capture.c 程序主要是用来演示怎样使用 v4l2 接口,并没有对采 ...

  8. socket , 套接口还是套接字,傻傻分不清楚

    socket 做网络通信的朋友大都对socket这个词不会感到陌生,但是它的中文翻译是叫套接口还是套接字呢,未必大多数朋友能够分清,今天我们就来聊聊socket的中文名称. socket一词的起源 在 ...

  9. Android获得控件在屏幕中的绝对坐标

    int[] location = new int[2] ; view.getLocationInWindow(location); //获取在当前窗口内的绝对坐标 view.getLocationOn ...

  10. Typescript 查缺补漏

    Types Casting: let input = xxx as HTMLInputElement; let input = <HTMLElement>xxxx; Object Shap ...