WebService 页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/// <summary>
    /// TsetWeb 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。
    [System.Web.Script.Services.ScriptService]
    public class TsetWeb : System.Web.Services.WebService
    {
        TestBll bll = new TestBll();
 
        [WebMethod(Description = "获取所有对象信息")]
        public string AllUserJson()
        {
            return ToJson(bll.GetAllUser());
        }
 
        [WebMethod(Description = "添加一个对象信息")]
        public string SetUserJson(string name ,string phone)
        {
            return ToJson(bll.SetAddUser(name,phone));
        }
        [WebMethod(Description = "删除一个对象信息")]
        public string DelUserJson(int id)
        {
            return ToJson(bll.DelUser(id));
        }
        [WebMethod(Description = "更改一个对象信息")]
        public string Update(int id, string name, string phone)
        {
            Test user = new Test();
            user.id = id;
            user.name = name;
            user.phone = phone;
            return ToJson(bll.Update(user));
        }
 
        //对数据序列化，返回JSON格式
        public string ToJson(object obj)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(obj);
        }
    }

　　AJAX调用WebService 页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<body>
    <form id="form1" runat="server">
    <div>
        <table id="tab">
            <tr>
                <td>编号</td>
                <td>名字</td>
                <td>电话</td>
                <th>操作</th>
            </tr>
        </table>
    </div>
        <input type="button" name="add" id="add" value="添加" />
    </form>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
            $.ajax({
                url: "/TsetWeb.asmx/AllUserJson",
                contentType: 'application/json',
                dataType: "json",
                type: "post",
                success: function(data) {
                    var a = eval("(" + data.d + ")"); //后台返回是字符串，所以转换为json对象
                    $.each(a, function(index, item) {
                        var tr = $("<tr/>");
                        $("<td/>").html(item["id"]).appendTo(tr);
                        $("<td/>").html(item["name"]).appendTo(tr);
                        $("<td/>").html(item["phone"]).appendTo(tr);
                        $("<button id ='d' onclick='del(" + item["id"] + ")'>").html("删除").appendTo(tr);
                        $("<button id ='u' onclick='updata(" + item["id"] + ")'>").html("更新").appendTo(tr);
                        tr.appendTo("#tab");
                    });
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
                }
            });
        });
        $("#add").click(function() {
            $.ajax({
                url: "/TsetWeb.asmx/SetUserJson",
                data: "{name:'李六',phone:'13727713819'}",
                contentType: 'application/json',
                dataType: "json",
                type: "post",
                success: function (data) {
                    var a = eval("(" + data.d + ")"); //后台返回是字符串，所以转换为json对象
                    alert(a);//返回1表示成功
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
                }
            });
        });
        function del(id) {
            $.ajax({
                url: "/TsetWeb.asmx/DelUserJson",
                type: "Post",
                data: { "id": id },
                dataType: "json",
                success: function (data) {
                    var a = eval("(" + data.d + ")"); //后台返回是字符串，所以转换为json对象
                    alert(a);//返回1表示成功
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
                }
            });
        }
 
        function updata(id) {
            $.ajax({
                url: "/TsetWeb.asmx/Update",
                type: "Post",
                data: { "id": id, "name": '九九', "phone": '15927713819' },
                dataType: "json",
                success: function (data) {
                    var a = eval("(" + data.d + ")"); //后台返回是字符串，所以转换为json对象
                    alert(a);//返回1表示成功
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
                }
            });
        }
    </script>
</body>

　　AJAX调用WebService结果：

WebApi页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
public class ValuesController : ApiController
    {
        TestBll bll = new TestBll();
 
        // GET api/values/GetAll()
        [HttpGet]
        public List<Test> GetAll()
        {
            return bll.GetAllUser();
        }
        [HttpPost]
        public int PostNew([FromBody]Test user)
        {
            return bll.SetAddUser(user.name, user.phone);
        }
        [HttpPost]
        public int PostNew(string name ,string phone)
        {
            return bll.SetAddUser(name, phone);
        }
 
        [HttpDelete]
        public int Delete([FromBody]Test user)
        {
            return bll.DelUser(user.id);
        }
 
        [HttpPut]
        public int Put([FromBody] Test user)
        {
            return bll.Update(user);
        }
    }

　　AJAX调用WebApi页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<div>
    <table id="tab">
        <tr>
            <th>编号</th>
            <th>名字</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
    </table>
    <input type="button" name="add" id="add" value="添加" />
</div>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
 <script>
     $(function() {
         $.ajax({
             url: "api/Values/GetAll",
             type: "GET",
             dataType: "json",
             success: function(data) {
                 $.each(data, function(index, item) {
                     var tr = $("<tr/>");
                     $("<td/>").html(item["id"]).appendTo(tr);
                     $("<td/>").html(item["name"]).appendTo(tr);
                     $("<td/>").html(item["phone"]).appendTo(tr);
                     $("<button id ='d' onclick='del(" + item["id"] + ")'>").html("删除").appendTo(tr);
                     $("<button id ='u' onclick='updata(" + item["id"] + ")'>").html("更新").appendTo(tr);
                     tr.appendTo("#tab");
                 });
             },
             error: function(XMLHttpRequest, textStatus, errorThrown) {
                 alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
             }
         });
          
     });
     $("#add").click(function () {
         $.ajax({
             url: "api/Values/Put",
             type: "Put",
             data: {"id":id, "name":'赵七',"phone":'15727713819'},
             dataType: "json",
             success: function (data) {
                 alert(data);//返回1表示成功
             },
             error: function (XMLHttpRequest, textStatus, errorThrown) {
                 alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
             }
         });
     });
     function del(id) {
         $.ajax({
             url: "api/Values/Delete",
             type: "Delete",
             data: { "id": id },
             dataType: "json",
             success: function (data) {
                 alert(data);//返回1表示成功
             },
             error: function (XMLHttpRequest, textStatus, errorThrown) {
                 alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
             }
         });
     }
 
     function updata(id) {
         $.ajax({
             url: "api/Values/Put",
             type: "Put",
             data: { "id": id, "name": '黄八', "phone": '15927713819' },
             dataType: "json",
             success: function (data) {
                 alert(data);//返回1表示成功
             },
             error: function (XMLHttpRequest, textStatus, errorThrown) {
                 alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
             }
         });
     }
    </script>

　　AJAX调用WebApi结果：

AJAX 调用WebService 、WebApi 增删改查的更多相关文章

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

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

  2. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  3. MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查

    MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的:   1.MVC3项目简单配置EF code first生成并初始化数据 ...

  4. C#利用WinForm调用WebServices实现增删改查

    实习导师要求做一个项目,用Winform调用WebServices实现增删改查的功能.写下这篇博客,当做是这个项目的总结.如果您有什么建议,可以给我留言.欢迎指正. 1.首先,我接到这个项目的时候,根 ...

  5. AJAX 调用WebService 、WebApi 增删改查（笔记）

    经过大半天努力,终于完成增删改查了!心情有点小激动!!对于初学者的我来说,一路上都是迷茫,坑!!虽说网上有资料,可动手起来却不易(初学者的我).(苦逼啊!) WebService 页面: /// &l ...

  6. ASP.NET WebApi 增删改查

    本篇是接着上一篇<ASP.NET WebApi 入门>来介绍的. 前言 习惯说 CRUD操作,它的意思是"创建. 读取. 更新和删除"四个基本的数据库操作.许多 HTT ...

  7. WebApi增删改查Demo

    1.新建webapi项目 2.配置WebApiConfig public const string DEFAULT_ROUTE_NAME = "MyDefaultRoute"; p ...

  8. ajax——优化0126（增删改查：添加查看详情，返回结果类型为JSON型，在窗口显示）

    效果: 鼠标点击查看详情时 数据库: 0126.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  9. 关于MVC工厂模式的增删改查sql存储过程

    这里MVC中用到了反射,工厂,泛型,接口 在搭建框架的时候,除了MVC的三层以外,还有泛型的接口层和工厂层 下面是dal层调用sql存储过程,增删改查,dal层继承了接口层,实现了接口层里面的方法 1 ...

随机推荐

  1. 用variant的数据来推导基因表达 | Imputation of Expression Using PrediXcan

    一个工具的逻辑得足够完善.意义足够重大,才有资格发在NG上. A gene-based association method for mapping traits using reference tr ...

  2. JVM 数组创建的本质

    1.创建数组 创建一个MyParent4[] 数组 public class MyTest4 { public static void main(String[] args) { MyParent4[ ...

  3. 当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...

  4. Spring 接口日志 AOP

    接口日志记录AOP实现-LogAspect - 91博客it技术开发者 - 博客园https://www.cnblogs.com/007sx/p/5810818.html Spring AOP(一) ...

  5. (E2E_L2)包含目录、库目录、附加包含目录、附加库目录、附加依赖项之详解【正确的目录添加方法】

    VS项目中的包含目录.库目录.附加包含目录.附加库目录.附加依赖项均在"项目->属性->配置属性"下进行配置 一.具体说明如下: 1.VC++目录:     包含目录: ...

  6. HTML中 :after和:before的作用及使用方法（转）

    1.  :before 和 :after 的主要作用是在元素内容前后加上指定内容,示例: HTML代码: <p>你好</p> CSS代码: p:before{ content: ...

  7. 在调用self对象时，本类调用用Win32Info().collect()

    import platform class Test: def test(self): func = getattr(self,'windows') func() @staticmethod def ...

  8. shell编程系列9--文本处理三剑客之sed概述及常见用法总结

    shell编程系列9--文本处理三剑客之sed概述及常见用法总结 sed的工作模式:对文本的行数据一行行处理,如下图 sed(stream editor),是流编辑器,依据特定的匹配模式,对文本逐行匹 ...

  9. 查看Oracle中是否有锁表

    转: 查看Oracle中是否有锁表 2018-04-23 17:59 alapha 阅读(19450) 评论(0) 编辑 收藏 一.用dba用户登录,或者将用户赋权为DBA用户 命令: su - or ...

  10. 【Redis】Redis 主从模式搭建

    主从模式介绍 Redis虽然读取写入的速度都特别快,但是也会产生读压力特别大的情况.为了分担读压力,Redis支持主从复制,Redis的主从结构可以采用一主多从或者级联结构,Redis主从复制可以根据 ...